Full Stack Developer Masters Program (63 Blogs) Become a Certified Professional

Bootstrap Pagination: What, Why and How?

Last updated on May 04,2020 1.6K Views

5 / 12 Blog from Boostrap

When there are multiple pages, numbering these pages becoming essential to distinguish one page from another. When you have websites that have heavy content, it helps to divide the content and structure the data. This also helps the reader to navigate through the pages easily and indicates a series of related content. In this blog, you’ll be learning about Bootstrap Pagination in the following sequence:

Let’s begin.

What is Pagination?

Paginations are built using HTML elements, and each page is hyperlinked to another page. For example, pagination can be used to navigate in between the search result pages. Again, if you’re developing a site with multiple pages, you should be adding pagination on every page.

Let’s get started with paginations!

Bootstrap Pagination

  • First, add “.pagination” class to an unordered list
  • Next, add “.page-item” to each list item element and a “.page-link” class to every link inside the list item

Your code should look something like this:

  • Previous
  • 1
  • 2
  • 3
  • Next

Output- Pagination - Edureka.pngExplanation:

The above code is used to create simple bootstrap pagination. It doesn’t indicate what page the user is on nor does it help the user to navigate through the pages.

As we now know how to create basic bootstrap pagination, let’s move onto how to activate a particular part of the pagination.

Active State Pagination

The active option is used to highlight the current page number. Highlighting the page number makes it easier for the end-user to know which page they are on exactly. In order to achieve this, you’ll have to use the “.active” class.

 

For Example:

  • Previous Page
  •  1
  •  2
  •  3
  •  4
  •  5
  • Next Page

Output- Pagination - Edureka.png

Now that we have learned to activate the bootstrap pagination, let’s move onto to disable a particular block of the pagination.

Disabled State Pagination

When you want to disable certain page links, you can use the “.disabled” option.

For Example:

  • Previous Page
  • 1
  • 2
  • 3
  • Next Page

Output- Pagination - Edureka.png

Now that we know how to create basic pagination, activate and deactivate it, let’s learn how to change the size of the pagination.

Pagination Sizing

A pagination block’s size can be changed according to the aesthetics of the page. You add “.pagination-lg” for larger blocks and “.pagination-sm” for smaller blocks.

For Example:

“pagination pagination-lg”

  • Previous
  • 1
  • 2
  • 3
  • NextOutput- Pagination - Edureka.pngPrevious
  • 1
  • 2
  • 3
  • Next

Output- Pagination - Edureka.png

Lets understand the bootstrap Pagination Alignment.

Pagination Alignment

To align the pagination blocks on the left, right, or center of the page, you need to use utility classes.

For Example:

Output- Pagination - Edureka.png

Now let’s learn about Breadcrumbs.

To indicate the page’s current location using navigational hierarchy, you use the “.breadcrumb” and “.breadcrumb-item” class.

For Example:

Output- Pagination - Edureka.png

With this, we have come to the end of this article. I hope you understood what is bootstrap pagination and what are the different types of pagination.

Check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.

Upcoming Batches For Full Stack Web Development Course
Course NameDateDetails
Full Stack Web Development Course

Class Starts on 12th October,2024

12th October

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

Bootstrap Pagination: What, Why and How?

edureka.co