Bootstrap List Groups Examples
What is a List Group?
A list group is a component in Bootstrap that allows you to create a series of items with a uniform appearance. It can be used to display a collection of related items, such as links, texts, or even custom content. List groups can be customized with various styles, making them versatile for different applications.
Why Use List Groups?
- Organization: List groups help organize related content in a structured way, making it easy for users to navigate through items.
- Visual Consistency: They provide a consistent look and feel for lists across your application, improving overall design cohesion.
- Interactive Features: List groups can be made interactive with links and buttons, allowing users to take action easily.
- Customizable: You can easily customize list groups with various colors, icons, and styles to fit your design needs.
ListGroups Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Pagination Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Basic List Group -->
<div class="mt-4">
<h5>Basic List Group</h5>
<ul class="list-group">
<li class="list-group-item">List item 1</li>
<li class="list-group-item">List item 2</li>
<li class="list-group-item">List item 3</li>
</ul>
</div>
<!-- Active and Disabled States -->
<div class="mt-4">
<h5>Active and Disabled States</h5>
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Active item</li>
<li class="list-group-item">List item 1</li>
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">List item 2</li>
</ul>
</div>
<!-- Links in List Group -->
<div class="mt-4">
<h5>Links in List Group</h5>
<ul class="list-group">
<a href="http://aitaurangabad.com/" class="list-group-item list-group-item-action">Acedemy Of Information Technologies</a>
<a href="index.html" class="list-group-item list-group-item-action">Bootstrap Home</a>
<a href="Buttons.html" class="list-group-item list-group-item-action">Buttons</a>
</ul>
</div>
<!-- List Group with Badges -->
<div class="mt-4">
<h5>List Group with Badges</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
List item 1
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
List item 2
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
List item 3
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<!-- List Group with Images -->
<div class="mt-4">
<h5>List Group with Images</h5>
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<img src="sky.jpg" style="height: 40px;" class="rounded-circle mr-3" alt="...">
List item 1
</li>
<li class="list-group-item d-flex align-items-center">
<img src="Bird.jpg" style="height: 40px;" class="rounded-circle mr-3" alt="...">
List item 2
</li>
<li class="list-group-item d-flex align-items-center">
<img src="sea.jpg" style="height: 40px;" class="rounded-circle mr-3" alt="...">
List item 3
</li>
</ul>
</div>
<!-- List Group with Contextual Colors -->
<div class="mt-4">
<h5>List Group with Contextual Colors</h5>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-light">Light item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output Example
Basic List Group
- List item 1
- List item 2
- List item 3
Active and Disabled States
- Active item
- List item 1
- Disabled item
- List item 2
Links in List Group
List Group with Badges
- List item 1 14
- List item 2 2
- List item 3 1
List Group with Images
-
List item 1
-
List item 2
-
List item 3
List Group with Contextual Colors
- Primary item
- Secondary item
- Success item
- Danger item
- Warning item
- Info item
- Light item
- Dark item