What is a Pagination / Paging
Pagination or paging is the process in which a large web page is divided into a lot of small pages. You can adjust size of pagination and highlight the selected page. Following classes are provided by Bootstrap.
.pagination
.pagination-lg
.pagination-sm
.active
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
</ul>
<ul class="pagination pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
Output
Breadcrumbs in Website
Breadcrumb is the advanced form of pagination. It shows the navigation hierarchy of the current page. For this bootstrap provides class .breadcrumb.
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pointers</a></li>
<li><a href="#">C++</a></li>
<li class="Active">Pointers</li>
</ul>
Output
Pager
Pager is another form of pagination. It contains previous and next links for page navigation. Bootstrap has below classes to use the pager.
.pager
.previous
.next
Previous and next classes align both links to the right and left of the page.
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
Output
List Group
Bootstrap provides the below classes to group list items.
.list-group is used for list
.list-group-item is used for list item. List item can be li or a
.list-group-item-active is used to highlight the selected list item
You can use badge inside the list item. Contextual classes can be used for list items to make them colorful.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Success List Item</a>
<a href="#" class="list-group-item list-group-item-danger">Dangerous List Item</a>
<li class="list-group-item active">Active List Item</li>
</div>
Output
Bootstrap Panel
A panel is a box with some styling as padding, border. The panel has three sections, panel heading, body/content and footer. Bootstrap has the following build-in classes to use panel.
.panel
.panel-heading
.panel-body
.panel-footer
Contextual classes can be used in the panel. You can also group multiple panels using .panel-group class.
<div class="panel-group">
<div class="panel panel-success">
<div class="panel-heading">Success Panel Header</div>
<div class="panel-body">Content Area</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Primary Panel Header</div>
<div class="panel-body">Content Area</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Info Panel Header</div>
<div class="panel-body">Content Area</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Warning Panel Header</div>
<div class="panel-body">Content Area</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Dangerous Panel Header</div>
<div class="panel-body">Content Area</div>
</div>
</div>
Output
Dropdown Menu / Dropdown List
Dropdown Menu lets the user to select one value from given list. To create a dropdown, follow below steps
- Create a div with class .dropdown
- Create a button or link inside div with class .dropdown-toggle and attirbute data-toggle="dropdown"
- Inside button, create a span with class .caret to show down arrow () in button
- Create a ul with class .dropdown-menu and write few list items
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Courses
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">ReactJS</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Output
Dropdown Divider
Using .divider class, you can divide dropdown menu with horizontal border.
Dropdown Header
You can use .dropdown-header class to to add header at the top of dropdown menu section.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Language Courses
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Header 1</li>
<li><a href="#">ReactJS</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li class="dropdown-header">Header 2</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Output
Dropup Menu
To create dropup menu, just change .dropdown class to .dropup in div.
Output
Post a Comment