Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Create pagination with the help of Bootstrap classes

Ethan Karla 337 28 Jul 2021

How to create pagination with the help of Bootstrap classes?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

Pagination are usually used to those web pages which are having the lots of pages.

Let's have an example to demonstrate how to use progress-animated bar in Bootstrap :

<!DOCTYPE html>

<html lang='en'>

<head>

  <title>Bootstrap Pagination</title>

  <meta charset='utf-8'>

  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

<div class='jumbotron'>

  <h2>Pagination | Active</h2>

  <p>Create a pagination with the help of a Bootstrap classes</p>

  <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 active'><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>

</div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising