List Groups
Bootstrap List Groups are versatile components used for displaying lists of items in a formatted way. They provide a flexible and powerful solution for displaying a series of content. List groups can be used for anything from simple lists to complex interactive components. They are particularly useful for creating menus, comment sections, or grouped lists of interactive elements. The styling options allow for basic lists, lists with badges, lists with various color schemes, and even lists that function as navigation components.
Classes for Bootstrap List Groups
Here’s a table of the primary classes used for Bootstrap list groups:
Class Name | Description |
.list-group | The base class applied to the container element of the list group. |
.list-group-item | Used on each list item within a list group. |
.list-group-item-action | Makes a list item appear as an actionable element (e.g., clickable). |
.active | Indicates the active list item within the group. |
.disabled | Grays out an item to appear unavailable. |
.list-group-item-primary, .list-group-item-secondary, etc. | For applying contextual color schemes to list items. |
.list-group-flush | Removes some borders and rounded corners to fit flush with parent element. |
.list-group-horizontal | Causes the list group to layout horizontally at certain viewport sizes. |
Code Examples with Explanation
Let’s dive into examples for each class associated with Bootstrap List Groups, illustrating their usage and functionality.
Basic List Group
<ul class=”list-group”>
<li class=”list-group-item”>First item</li>
<li class=”list-group-item”>Second item</li>
<li class=”list-group-item”>Third item</li>
</ul>
Condensed Table
Bootstrap offers a .table-sm class to make tables more compact. This class reduces the padding inside table cells, making the table more condensed and suitable for displaying large datasets or for use in areas with limited space.
Applying Condensed Table Styling in Bootstrap
The .table-sm Class
- The .table-sm class, when combined with the .table class, decreases the padding in table cells, resulting in a more compact table.
- This class can be particularly beneficial for tables that need to display a lot of data without taking up too much space.
<table class=”table table-sm”>
<thead>
<tr>
<th scope=”col”>Country</th>
<th scope=”col”>Capital</th>
<th scope=”col”>Population</th>
</tr>
Explanation
– The `.list-group` class is used on the `<ul>` or `<ol>` element to create the container for the list group.
– `.list-group-item` is applied to each `<li>` element to style the individual list items.
List Group with Active and Disabled Items
<ul class=”list-group”>
<li class=”list-group-item active”>Active item</li>
<li class=”list-group-item”>Regular item</li>
<li class=”list-group-item disabled”>Disabled item</li>
</ul>
Explanation
– `.active` highlights a list item, typically to indicate the current or selected item.
– `.disabled` visually disables a list item.
List Group with Contextual Classes
<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>
<!– Add more items with different contextual classes like .list-group-item-success, .list-group-item-danger, etc. –>
</ul>
Explanation
– Contextual classes like `.list-group-item-primary`, `.list-group-item-danger` are used to style list items with different background colors based on context.
List Group Flush
<ul class=”list-group list-group-flush”>
<li class=”list-group-item”>Flush item 1</li>
<li class=”list-group-item”>Flush item 2</li>
<!– More flush items –>
</ul>
Explanation
– `.list-group-flush` removes some borders and rounded corners to make the list group items appear as a continuous element.
List Group with Badges
<ul class=”list-group”>
<li class=”list-group-item d-flex justify-content-between align-items-center”>
Item with badge
<span class=”badge badge-primary badge-pill”>14</span>
</li>
<!– More items with badges –>
</ul>
Explanation
– Badges are added to list items to show counts, statuses, or additional info. The `.badge` class is used along with `.badge-pill` for rounded badges
List Group as Actionable Items
<ul class=”list-group”>
<li class=”list-group-item d-flex justify-content-between align-items-center”>
Item with badge
<span class=”badge badge-primary badge-pill”>14</span>
</li>
<!– More items with badges –>
</ul>
Explanation
– `.list-group-item-action` makes a list item appear actionable (clickable). It’s used with `<a>` or `<button>` elements.
Horizontal List Group
<ul class=”list-group list-group-horizontal”>
<li class=”list-group-item”>Horizontal item 1</li>
<li class=”list-group-item”>Horizontal item 2</li>
<!– More horizontal items –>
</ul>
Explanation
– `.list-group-horizontal` aligns the list items horizontally instead of the default vertical alignment.
These examples cover a wide range of scenarios for using Bootstrap List Groups, demonstrating how the classes can be combined to create visually appealing and functional list presentations.
YouTube Reference :
