Breadcrumbs - Pagination in Bootstrap CSS

Bootstrap made it easy to define breadcrumb navigation. Just use the class "breadcrumb" and your breadcrumb navigation will be created. But before that don't forget to include bootstrap.css file in your page. Click here to learn detail about bootstrap and download the required files.

CSS Code:

<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">|</span></li>
<li><a href="#">About Us</a> <span class="divider">|</span></li>
<li class="active">Our Mission</li>
</ul>

Output:

Pagination

Like breadcrumbs user the class "pagination" in <div> and use <ul>  tag, it will auto create your pagination. It also provide options for active and disable states and sizing the pagination.

Basic pagination

HTML Code:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <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>
</nav>

Output:

Active and Disabled States

You can use .active class to make pagination active and .disabled class to make it inactive.

HTML Code:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></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>
</nav>

Output:

Size

Bootstrap provides different sizing option like large, small and default. You may use .pagination-lg, .pagination-sm or .pagination according to your use.

HTML Code:

 <nav aria-label="Page navigation example">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Output: