Navigation
-
Create structured navigation using Bootstrap components.
Introduction to Navigation Components
Navigation components help users:
Move between pages or sections
Understand content order
Interact with structured information
In Bootstrap, Pagination and List Group are used when navigation is content-driven, not layout-driven like Navbar.
They are very common in:
Blogs
E-commerce websites
Dashboards
Admin panels
Search results
Pagination
What Is Pagination ?
Pagination is used to divide large amounts of content into multiple pages instead of displaying everything at once.
Examples:
Blog post lists
Product listings
Search results
Tables with many records
Pagination improves:
Performance
Readability
User experience
Why Pagination Is Important
Pagination helps because it:
Prevents long scrolling
Reduces page load time
Makes navigation predictable
Improves usability for large datasets
Pagination is a navigation aid, not a layout tool.
Basic Pagination Structure
Bootstrap pagination is built using:
<ul> element
.pagination class
.page-item and .page-link
Creating a Basic Pagination Component in Bootstrap
The .pagination, .page-item, and .page-link classes create a styled page navigation layout.
<nav aria-label="Page navigation">
<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>- Understanding Pagination Code
Class Purpose .pagination Pagination container .page-item Individual page .page-link Clickable link <nav> Accessibility wrapper
Highlighting the Active Page in Pagination
The .active class highlights the current page in the pagination component.
<li class="page-item active">
<a class="page-link">2</a>
</li>Purpose:
Indicates current page
Improves clarity for users
Disabling Pagination Links in Bootstrap
The .disabled class makes a pagination item inactive and non-clickable.
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>Used when:
User is on first or last page
Pagination Sizes
Adjusting Pagination Size
Use .pagination-sm and .pagination-lg to create small or large pagination styles.
<!-- Small Pagination -->
<ul class="pagination pagination-sm"></ul>
<!-- Large Pagination -->
<ul class="pagination pagination-lg"></ul>Use sizes based on:
Screen size
Layout importance
Pagination Alignment
Aligning Pagination in Bootstrap
Use justify-content-center or justify-content-end to center or right-align pagination.
<!-- Centered Pagination -->
<ul class="pagination justify-content-center"></ul>
<!-- Right Aligned Pagination -->
<ul class="pagination justify-content-end"></ul>Uses Flex utilities for alignment.
Pagination Best Practices
Keep page numbers limited
Always show current page
Disable invalid navigation
Use pagination only for large datasets
Combine with backend logic for real data
List Group
What Is a List Group ?
A List Group is a flexible component used to display:
A list of items
Linked content
Status-based items
Navigation options
List groups are more content-focused than navbars.
Why Use List Groups ?
List groups are useful because they:
Organize related items
Improve readability
Support actions and links
Work well in sidebars and panels
Creating a Basic List Group in Bootstrap
The .list-group class creates a styled list, and .active highlights the selected item.
<ul class="list-group">
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
<li class="list-group-item">Item Three</li>
</ul>
<!-- List Group with Active Item -->
<ul class="list-group">
<li class="list-group-item active">Active Item</li>
<li class="list-group-item">Normal Item</li>
</ul>Used to:
Highlight selected content
Indicate current section
List Group with Links
Creating a List Group with Clickable Links
The .list-group-item-action class makes list group items clickable and interactive.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action">
Profile
</a>
</div>Common use:
Sidebar navigation
Settings menus
Disabled List Item
Disabling Items in a List Group
The .disabled class makes a list group item inactive and unclickable.
<li class="list-group-item disabled">
Disabled Item
</li>Indicates:
Unavailable options
Restricted access
List Group with Contextual Colors
Applying Contextual Colors to List Group Items
Contextual classes like .list-group-item-success and .list-group-item-danger add color-based meanings to list items.
<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-danger">Error</li>
<li class="list-group-item list-group-item-warning">Warning</li>Used for:
Status lists
Notifications
Messages
List Group with Badges
Adding Badges to List Group Items
Badges can be added inside list items to display counts or notifications.
<li class="list-group-item d-flex justify-content-between align-items-center">
Messages
<span class="badge bg-primary rounded-pill">4</span>
</li>Common use:
Notifications
Counts
Inbox items
List Group Best Practices
Keep items concise
Use badges sparingly
Avoid long paragraphs
Use for lists, not layouts
Combine with grid for placement
Pagination vs List Group
Feature Pagination List Group Purpose Page navigation Content listing Use case Large datasets Grouped items Interaction Page switching Selection / navigation Layout role Navigation Content support Both are navigation helpers, but serve different roles.
Common Mistakes
Using pagination for small content
Forgetting active state
Using list groups as grid replacement
Overloading list items
Ignoring accessibility