Scribd
Upload
21 views

Bootstrap Components

The document demonstrates different styles for buttons, alerts, progress bars, pagination, and breadcrumbs using Bootstrap classes. It includes examples of basic, primary, secondary, success, info, warning, danger, dark, and light buttons as well as success, info, and warning alerts, progress bars at 50% and 60% widths, default and large pagination, and a breadcrumb trail.

Uploaded by

Raoul Shaik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Bootstrap Components

The document demonstrates different styles for buttons, alerts, progress bars, pagination, and breadcrumbs using Bootstrap classes. It includes examples of basic, primary, secondary, success, info, warning, danger, dark, and light buttons as well as success, info, and warning alerts, progress bars at 50% and 60% widths, default and large pagination, and a breadcrumb trail.

Uploaded by

Raoul Shaik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-
4.7.0/css/font-awesome.min.css">
<title>Document</title>
<style>
.btn{
margin: 15px 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2 style="margin-top: 1em;">Button Styles</h2>
</div>
<div class="row justify-content-center">

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<h3 class="text-center">Alert Box</h3>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral
informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that
might need attention.
</div>
<h3 class="text-center">Progress bars</h3>
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:50%;height:20px">50%</div>
</div>
<br>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width:60%;height:30px">60%</div>
</div>

<h3 class="text-center mt-2">Pagination</h3>


<p class="text-center">Add class .pagination-lg for larger blocks or
.pagination-sm for smaller blocks.</p>
<p class="text-center">to change the position of the pagination use
.justify-content-center to center the element
and use .justify-content-start to have it at the beginning or .justify-
content-end to have it at the end
</p>
<div class="row">
<div class="col-sm-6">
<p>Default:</p>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

</div>
<div class="col-sm-6">
<p>Large:</p>
<ul class="pagination pagination-lg justify-content-end">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
<h2 class="text-center">Breadcrumbs</h2>
<p class="text-center">The .breadcrumb class indicates the current page's
location within a navigational hierarchy:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>

</div>

<script src="bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
</body>
</html>

You might also like