Skip to main content

Bootstrap pagination

Pagination describes the number of web pages on a website. A website with 5 web page looks as shown below. 

<nav>
  <ul class="pagination">
    <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
   </ul>
</nav>
Any web page link can be highlighted using the active class. 


<nav>
  <ul class="pagination">
    <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 active"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
   </ul>
</nav>
Any web page link can be deactivated using disabled class. 


<nav>
  <ul class="pagination">
    <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 disabled"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
   </ul>
</nav>
Size of pagination can be varied from the default using pagination-lg for large sized pagination and with pagination-sm for small sized pagination. 



<nav>
  <ul class="pagination">
    <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
   </ul>
</nav>



<nav>
  <ul class="pagination">
    <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
   </ul>
</nav>
Bootstrap pagers can be added to the website using pager class to the ul element. Pages will show the previous and next links. It an alternative to pagination that provides the navigation to adjacent web pages. 

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
Pagers can be aligned for showing them at the corners of parent element using previous and next class to the links. 

<nav>
  <ul class="pager">
    <li class="pager-prev"><a href="#">Previous</a></li>
    <li class="pager-next"><a href="#">Next</a></li>
  </ul>
</nav>
Pager can also be made in-active using disabled class to li element. 

<nav>
  <ul class="pager">
    <li class="pager-prev"><a href="#">Previous</a></li>
    <li class="pager-next disabled"><a href="#">Next</a></li>
  </ul>
</nav>

Popular posts from this blog

Introduction to bootstrap

Bootstrap is the simplest framework used to create both mobile and desktop friendly responsive websites without any prior programming language experience. History of bootstrap Mark Otto and Jacob Thornton, developers from Twitter, developed an internal tool while working in twitter company. It was named as Twitter Blueprint. Months later, many developer from twitter started to contribute to this internal tool. Later it was renamed as Bootstrap and was released as an open source project in GitHub on 19th August 2011. Compatibility with browsers and devices Bootstrap is compatible with all the latest versions of web browsers namely Google Chrome, Microsoft Internet explorer, Microsoft Edge, Firefox, Safari, Android Browser and WebView. How to get the bootstrap? Bootstrap can be included from the Content Delivery Network(CDN) into the webpage  or  it can be downloaded from the official website Bootstrap usage guidelines Webpage should have HTML5 doctype...
Read more

How to create breadcrumb in bootstrap 4 ?

Breadcrumb provides the hierarchical navigation of a webpage. If the webpage resides deep down the hierarchy, breadcrumb helps in navigation. This will be most useful for the websites having large number of webpages. It indictes the cuurent location of a webpage. Home Folder 1 Folder 2 <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Folder 1</a></li> <li><a href="#">Folder 2</a></li> </ol> In above example, Folder 1 resides inside Home directory and Folder 2 resides inside Folder 1. We need to add .breadcrumb class to the ol HTML tag. Seperators will be automatically added by CSS through ::before and content as shown below. .breadcrumb > li + li:before { color:#CCCCCC; content:"/ "; padding:05px; }
Read more

How to create vertical, inline and horizontal forms in bootstrap 4 ?

Creating a form in HTML 5 and styling it with CSS manually is a tedious process. Bootstrap form simplifies this task with its own styles and layouts. It supports several form controls with its predefined classes for textual inputs, select menus, text ares, file inputs, check boxes and radio buttons. Note: All inputs must have a type attribute as mandatory, since bootstrap utilizes the HTML5 doctype. Vertically aligned form controls Bootstrap by default, sets the  display:block  and  width:100%  which causes the form elements to stack vertically. Email address We'll never share your email with anyone else. Password Submit <form> <fieldset class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <small class="text-muted...
Read more