List group is a collection of list items grouped together in a single component. This is one of the useful components in Bootstrap 5 to create sidebar navigational links and menu items. You can have different backgrounds, show the list items along with a badge and use as a link or button. In this Bootstrap 5 list group tutorial, let us see all possibilities with examples and code.
Bootstrap 5 List Group Tutorial
This tutorial covers the following topics:
- Creating default list group
- Using anchor tag in list group
- Adding buttons in list group
- Showing active and disabled items
- List group with different background colors
- Adding badges
- Customize with background and badge
- Inserting HTML content
- Vertical tab list group
1. Default List Group
By default the list group is create using <ul> and <li> tags. The <ul> tag should use “.list-group” to indicate the element is a list group and each <li> tags should use “.list-group-item” to indicate a list group item. Each list item will be separated with a divider line by default.
<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>
<li class="list-group-item">List Item 4</li>
</ul>The default list group will look like below on the browser. Remember the list group will occupy the full width of the container, hence you should use additional CSS to restrict the width if you want.
2. Using Anchor Tag in List Group
Using <li> tag has limited use as the text can’t be linked. So you can use <a> tag instead of <li> to create actionable links like below:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">List Item 1 with Anchor Tag</a>
<a href="#" class="list-group-item list-group-item-action">List Item 2 with Anchor Tag</a>
</div>Note the use of “.list-group-item-action” class on list items to indicate this is an actionable item. The result will look similar to the default list group with the possibility to click on the link items.
3. Using Button Tag in List Group
Similar to anchor tag, you can also use <button> tag to create actionable list group items.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">List Item 1 with Button Tag</button>
<button type="button" class="list-group-item list-group-item-action">List Item 1 with Button Tag</button>
</div>Again the result will look similar with the difference of the items will have a button effect.
4. Showing Active and Disabled Items
Just add “.active” or “.disabled” classes to any of the list group items to make it active or disabled. The active item will have a primary color background and the disabled item will be in dimmed color showing a stop cursor symbol when the mouse is hovered on.
<ul class="list-group">
<li class="list-group-item active">Active List Item 1</li>
<li class="list-group-item">Normal List Item 2</li>
<li class="list-group-item disabled">Disabled List Item 3</li>
</ul>It should produce the below results as explained:
5. Bootstrap 4 List Group with Background Colors
Always looking at the white background will be boring. Add background colors to the list group items with the predefined background classes. For example, success color can be added using the class “.list-group-item-success” to the required list item.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">No Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light Background</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark Background</a>
</div>The result will look like below on the browser:
6. Bootstrap 4 List Group with Badges
We have explained the badge component in earlier tutorial. It is easy to show badges against list group items using an additional <span> tag with badge classes. This is most popularly used on admin dashboards to show reminders.
<ul class="list-group">
<li class="list-group-item justify-content-between">Open Tickets
<span class="badge badge-danger badge-pill">20</span>
</li>
<li class="list-group-item justify-content-between">Closed Tickets
<span class="badge badge-success badge-pill">50</span>
</li>
<li class="list-group-item justify-content-between">Solved Tickets
<span class="badge badge-secondary badge-pill">10</span>
</li>
<li class="list-group-item justify-content-between">Work In Progress Tickets
<span class="badge badge-info badge-pill">6</span>
</li>
<li class="list-group-item justify-content-between">Ticket In Assigned Status
<span class="badge badge-warning badge-pill">16</span>
<li class="list-group-item justify-content-between">Some Primary Badge
<span class="badge badge-primary badge-pill">10</span>
<li class="list-group-item justify-content-between">Some Light Badge
<span class="badge badge-light badge-pill">26</span>
<li class="list-group-item justify-content-between">Some Dark Badge
<span class="badge badge-dark badge-pill">14</span>
</li>
</ul>The “.justify-content-between” is used to justify the space between list item text and the badge. It will produce the result like below:
In the above example, we have used list group items with no background and pill badges with different colors. You can use default badges or use any custom colors with custom CSS.
7. List Group with Background and Badge
The background color of the list item will be in a light color when you use list group item background classes like “.list-group-item-success”. You can use background contextual classes instead to have darker background.
<ul class="list-group">
<li class="list-group-item justify-content-between bg-light">Open Tickets
<span class="badge badge-danger badge-pill">20</span>
</li>
<li class="list-group-item justify-content-between bg-warning">Closed Tickets
<span class="badge badge-success badge-pill">50</span>
</li>
<li class="list-group-item justify-content-between bg-success text-white">Solved Tickets
<span class="badge badge-secondary badge-pill">10</span>
</li>
<li class="list-group-item justify-content-between bg-dark text-white">Work In Progress Tickets
<span class="badge badge-info badge-pill">6</span>
</li>
<li class="list-group-item justify-content-between bg-primary text-white">Ticket In Assigned Status
<span class="badge badge-success badge-pill">6</span>
</li>
</ul>The result will look attractive like below:
8. List Group with HTML Content
The flexbox utility classes allows you to add any type of HTML content inside list group component.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">This is a heading1</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Enter any content here.</p>
<small>Some small text here.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">This is a heading2</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Enter any content here.</p>
<small>Some small text here.</small>
</a>
</div>It will produce the following result:
9. Bootstrap 4 List Group with Vertical Tabs
It is also possible to create tabbed content using list group and the default Bootstrap JavaScript. Below is an example code for creating for tabs in a vertical alignment and different content will be shown under each tab.
<div class="row">
<div class="col-4">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#tab1" role="tab">TAB 1</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#tab2" role="tab">TAB 2</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#tab3" role="tab">TAB 3</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#tab4" role="tab">TAB 4</a>
</div>
</div>
<div class="col-8">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tab1" role="tabpanel">Content for tab 1 here...</div>
<div class="tab-pane" id="tab2" role="tabpanel"> Tab 2 content goes here...</div>
<div class="tab-pane" id="tab3" role="tabpanel">Enter anything for tab 3...</div>
<div class="tab-pane" id="tab4" role="tabpanel">Finally tab 4 content is here...</div>
</div>
</div>
</div>The vertical tabbed content will look like below:
Wrapping Up
List group helps to show list of items in a smaller space. You can use tabs, links, buttons and do many more things with list group. We recommend to use list group in your site’s sidebar to show related or popular content.
Leave a Reply
Your email is safe with us.