Course Content
Bootstrap 5 Tutorial
Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. Bootstrap 5 is completely free to download and use!
0/32
Bootstrap 5 Get Started
Bootstrap 5 Containers
Bootstrap 5 Grids
Bootstrap 5 Text/Typography
Bootstrap 5 Colors
Bootstrap 5 Background Colors
Bootstrap 5 Tables
Bootstrap 5 Images
Bootstrap 5 Jumbotron
Bootstrap 5 Alerts
Bootstrap 5 Buttons
Bootstrap 5 Button Groups
Bootstrap 5 Badges
Bootstrap 5 Progress Bars
Bootstrap 5 Spinners
Bootstrap 5 Pagination
Bootstrap 5 List Groups
Bootstrap 5 Cards
Bootstrap 5 Dropdowns
Bootstrap 5 Collapse
Bootstrap 5 Navs
Bootstrap 5 Navbars
Bootstrap 5 Carousel
Bootstrap 5 Modal
Bootstrap 5 Tooltip
Bootstrap 5 Popover
Bootstrap 5 Toasts
Bootstrap 5 Scrollspy
Bootstrap 5 Offcanvas
Bootstrap 5 Utilities
Bootstrap 5 Dark Mode
Bootstrap 5 Flex
Bootstrap 5 Forms
Bootstrap 5 provides a comprehensive set of CSS classes and components to style and enhance forms.
0/7
Bootstrap 5 Forms
Bootstrap 5 Select
Bootstrap 5 Checkboxes and Radio buttons
Bootstrap 5 Range
Bootstrap 5 Input Groups
Bootstrap 5 Form Floating Labels
Bootstrap 5 Form Validation
Bootstrap 5 Grid
In Bootstrap 5, the grid system is a powerful and flexible feature that allows you to create responsive layouts for your web pages. The grid system is based on a 12-column layout, which helps you organize and align content effectively.
0/9
Bootstrap 5 Grid System
Bootstrap 5 Grid Stacked to horizontal
Bootstrap 5 Grid Extra Small
Bootstrap 5 Grid Small
Bootstrap 5 Grid Medium
Bootstrap 5 Grid Large
Bootstrap 5 Grid Extra Large
Bootstrap 5 Grid XXL
Bootstrap 5 Grid Examples
Bootstrap 5 Other
Bootstrap 5 offers many other features and components in addition to the ones mentioned earlier
0/4
Bootstrap 5 Templates
Bootstrap 5 Editor
Bootstrap 5 Exercises
Bootstrap 5 Quiz
Bootstrap 5 – A Comprehensive Guide to Modern Web Development
About Lesson

In Bootstrap 5, pagination is used to divide content into multiple pages and provide navigation between them. It is commonly used for displaying long lists or sets of data. Here’s how you can create pagination in Bootstrap 5:

  1. Basic Pagination:
<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>
</ul>
  1. Disabled and Active States:
<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item active" aria-current="page"><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>
  1. Sizing:
<ul class="pagination pagination-sm">
  <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>
</ul>

<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>
</ul>

<ul class="pagination pagination-lg">
  <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>
</ul>

4. Alignment:

<ul class="pagination justify-content-start">
  <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>

<ul class="pagination justify-content-center">
  <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>

<ul class="pagination justify-content-end">
  <li class="page-item"><
Join the conversation
Previous
Next