bootstrap pagination pager breadcrumbs panel dropdown list

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

what is pagination

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

bootstrap breadcrumbs

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

bootstrap pager alignment

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 list group

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

bootstrap panel

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 menu

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

dropdown list with divider and header

Dropup Menu

To create dropup menu, just change  .dropdown class  to .dropup in div.

<div class="dropup">

Output

dropup menu


Post a Comment

Previous Post Next Post