Bootstrap 4 Pagination
Bootstrap 4 Pagination

Bootstrap 4 Pagination

Bootstrap 4 pagination indicates a series of related content exists across multiple web pages.

Basic Pagination

To create bootstrap 4?pagination?follow the following steps.

To create pagination, you have to add?.pagination?to the pagination container base class.

To create pagination, you have to add?.page-item?to every page item or the child element of the parent container.

General Syntax

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>        

Source Code

<div class="container mt-4">
  <h2 class="mt-5 mb-3">Bootstrap Pagination</h2>
  <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="#">Next</a></li>
    </ul>
  </nav>
</div>        

Try It Now

Disabled and active states

To disable any page item, you have to add?the .disabled?class to any page item base class While to make any page item to active, you have to add?.active?to any page item base class.

General Syntax

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">2</a>
  </li>
</ul>        

Source Code

<div class="container mt-4">
  <h2>Boostarp Active & Disabled Page Item</h2>
  <nav>
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2 <span class="sr-only">2</span></a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#">Next</a>
      </li>
    </ul>
  </nav>
</div>        

Bootstrap 5 Pagination: Size

To control the pagination size, follow the following steps.

  • Smaller Size: To create a smaller size page item, add?.pagination-sm?class to the pagination container base class having?.pagination.
  • Large Size: To create a large-size page item, add?the .pagination-lg?class to the pagination container base class having?.pagination.

General Syntax

<ul class="pagination pagination-sm"></ul>
<ul class="pagination pagination-lg"></ul>        

Pagination: Alignment

To change pagination alignment, you have to add the flexbox utility class to the pagination parent container base class.

Pagination is aligned left by default. Therefore to align it in the center of the web page, assign?.justify-content-center?to the pagination container base class having?.pagination?class.

General Syntax

<ul class="pagination justify-content-end "></ul>        

Source Code

<div class="container mt-4">
  <h2>Pagination:Alignment</h2>
  <nav aria-label="Pagination">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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="#">Next</a>
      </li>
    </ul>
  </nav>
</div>        

Right Aligned Pagination

Since pagination is aligned by default left direction of the web page.To align it in the right side of the web page,assign?.justify-content-end?to the pagination container base class having?.pagination.

General Syntax

<ul class="pagination justify-content-end"></ul>        

Source Code

<div class="container mt-4">
  <h2>Centered Pagination</h2>
  <nav aria-label="Pagination">
    <ul class="pagination justify-content-end">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</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="#">Next</a>
      </li>
    </ul>
  </nav>
</div>        

To read more and view the complete source code, click here.

要查看或添加评论,请登录

Diwakar Chauhan的更多文章

  • Bootstrap Container Class

    Bootstrap Container Class

    In this tutorial, you will learn and understand the Bootstrap container class with the help of multiple examples…

  • Bootstrap Fixed Width Container

    Bootstrap Fixed Width Container

    Bootstrap containers are an essential element in the Bootstrap grid system. It plays an important role during grid…

  • Bootstrap Fluid Container

    Bootstrap Fluid Container

    Bootstrap fluid container/Bootstrap container fluid spans the entire width of the viewport or screen. It takes 100%…

  • Bootstrap Responsive Container

    Bootstrap Responsive Container

    Bootstrap responsive container covers 100% available width of the screen until the specified breakpoint, after which it…

  • Container in Bootstrap

    Container in Bootstrap

    The container in Bootstrap is used to set the padding around the content as well left and right margin to the content…

  • Bootstrap Containers

    Bootstrap Containers

    Bootstrap containers are the basic layout element in the Bootstrap grid system that is used to create empty space…

  • JSON Examples

    JSON Examples

    This section contains different JSON examples that belong to different JSON functions. Each function's feature has been…

  • HTML 5 Examples

    HTML 5 Examples

    This section consists of different HTML 5 examples that belong to different HTML 5 elements. Each element's feature has…

  • CSS 3 Examples

    CSS 3 Examples

    This section consists of different CSS 3 examples that belong to different CSS 3 components. Each component's feature…

  • Javascript Examples

    Javascript Examples

    This section consists of different Javascript examples that belong to different Javascript functions and features. JS…

社区洞察

其他会员也浏览了