Bootstrap list groups are basically an unordered list with list items.
Steps: to create list group:
.list-group
to the unordered list <ul>
element base class.
list-item
to the unordered list item<li>
element base class.
General Syntax
<ul class="list-group">
<li class="list-group-item">List Group item</li>
</ul>
Source Code
<ul class="list-group">
<li class="list-group-item">First List item</li>
<li class="list-group-item">Second List item</li>
<li class="list-group-item">Third List item</li>
</ul>
Try it yourself
Source Code : Output
Note:To create list-group ,assign .list-group to the list-group container base class and also assign .list-item to the list-item base class.
To display active item of list group,add .active
to the list item having .list-group-item
.
General Syntax
<ul class="list-group">
<li class="list-group-item active">Learn Bootstrap5</li>
<li class="list-group-item">Learn CSS3</li>
</ul>
Source Code
<ul class="list-group">
<li class="list-group-item active">Learn App Development</li>
<li class="list-group-item">Learn Graphics Design</li>
<li class="list-group-item">Learn Software Development</li>
</ul>
Try it yourself
Source Code : Output
Note: To create active list-item ,assign .active
to the list-item base class.
To make disabled list item add .disabled
to the list item having .list-group-item
.
General Syntax
<ul class="list-group">
<li class="list-group-item disabled">Learn Graphics Designing</li>
<li class="list-group-item">Learn Logo Design</li>
<li class="list-group-item">Learn App Design</li>
</ul>
Source Code
<ul class="list-group">
<li class="list-group-item disabled">Play With CSS</li>
<li class="list-group-item">CSS3 Animation</li>
<li class="list-group-item">Learn CSS Framework</li>
</ul>
Try it yourself
Source Code : Output
Note:
In this example,.disabled
is assigned to the list-item base class to create a disabled list item.
Steps to create actionable list item.
<div>
inplace of <ul>
and <a>
inplace of <li>
.
.list-group
to the
<div>
base class.
.list-group-item
to the
<a>
base class.
.list-group-item
to the
<a>
base class.
.list-group-item-action
to the element having list-group-item
class.
General Syntax
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Web Design
</a>
<a href="#" class="list-group-item list-group-item-action">
Graphics Design
</a>
<a href="#" class="list-group-item list-group-item-action">
Web Hosting
</a>
</div>
Source Code
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Web Design
</a>
<a href="#" class="list-group-item list-group-item-action">
Graphics Design
</a>
<a href="#" class="list-group-item list-group-item-action">
Web Hosting
</a>
</div>
<!--/list-group-->
</div>
<!--/col-sm-6-->
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:In this example, an actionable list item has been created by applying above mentioned steps.
To create active actionable list item,use .active
class to <a>
element base class.it will remove hover effect of actionable list item.
General Syntax
<div class="list-group">
<a href="#" class="list-group-item active">Web Design</a>
<a href="#" class="list-group-item active">App Design</a>
<a href="#" class="list-group-item">Graphics Design</a>
</div>
Source Code
<div class="list-group">
<a href="#" class="list-group-item active">Prototype Design</a>
<a href="#" class="list-group-item">Logo Design</a>
<a href="#" class="list-group-item active">Icon Design</a>
</div>
<!--/list-group-->
Try it yourself
Source Code : Output
Note: In this example, an active actionable list item has been created by assigning .active
to the <a>
element base class.
To create disabled actionable list item, use .disabled
class to <a>
element base class.it will remove hover effect of actionable list item.
General Syntax
<div class="list-group">
<a href="#" class="list-group-item active">Prototype Design</a>
<a href="#" class="list-group-item">Logo Design</a>
<a href="#" class="list-group-item active">Icon Design</a>
</div>
<!--/list-group-->
Source Code
<div class="list-group">
<a href="#" class="list-group-item disabled">Web Design</a>
<a href="#" class="list-group-item">App Design</a>
<a href="#" class="list-group-item disabled">Graphics Design</a>
</div>
<!--/list-group-->
Try it yourself
Source Code : Output
In this example, disabled actionable list item has been created by assigning .disabled
to the <a>
element base class.
Apply .list-group-flush
to the <ul>
element base class that remove some borders and rounded corners of the list items.
General Syntax
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Source Code
<ul class="list-group list-group-flush">
<li class="list-group-item">Learn PHP</li>
<li class="list-group-item">Learn JSP</li>
<li class="list-group-item">Learn Ruby</li>
</ul>
Try it yourself
Source Code : Output
Note: Bootstrap list group flush is used to remove some corners and borders of the list items.
To create horizontal list group ,add .list-group-horizontal to the <ul>
element base class.Horizontal list can also be created with respect to device breakpoint.You have to use .list-group-horizontal-{sm|md|lg|xl}
class to <ul>
element base class that make a list group horizontal starting at that breakpont's min-width.
Use .flex-fill class to every list item to make equal width of horizontal list item.
General Syntax
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Web Design</li>
<li class="list-group-item">Web Development</li>
<li class="list-group-item">Graphics Design</li>
</ul>
Source Code
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Web Design</li>
<li class="list-group-item">Web Development</li>
<li class="list-group-item">Graphics Design</li>
</ul>
Try it yourself
Source Code : Output
Note: Horizontal list group is created by assigning either .list-group-horizontal
or list-group-horizontal-{sm|md|lg|xl}
to the list group container(<ul>
) base class.
Bootstrap provides contextual class that provides additional color as well as background color to the list item.
Followings are the contextual classes that is very useful for coloring list item.These are .list-group-item-success
,.list-group-item-secondary
,.list-group-item-info
,.list-group-item-warning
,.list-group-item-danger
, .list-group-item-dark
and .list-group-item-light
.
General Syntax
<ul class="list-group">
<li class="list-group-item">Tutorials</li>
<li class="list-group-item list-group-item-primary">HTML Tutorial</li>
<li class="list-group-item list-group-item-secondary">CSS Tutorial</li>
<li class="list-group-item list-group-item-success">Bootstrap Tutorial</li>
</ul>
Source Code
<ul class="list-group">
<li class="list-group-item">Tutorials</li>
<li class="list-group-item list-group-item-primary">Web Design</li>
<li class="list-group-item list-group-item-secondary">Graphics Design</li>
<li class="list-group-item list-group-item-success">App Design</li>
</ul>
Try it yourself
Source Code : Output
Note: To provide different background colors to the list group, use list group, contextual classes.
General Syntax
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Action item
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">
Success item
</a>
</div>
Source Code
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Learn Adobe Photoshop</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Learn Adobe Illustrator CC</a>
</div>
Try it yourself
Source Code : Output
Note: Assign List group contextual class to the linked item base class to provide different background colors to the list item.
Combine .badge
classes with utility/helper classes to add badges inside the list group.Adding .badge
with additional helper classes to the badges inside list group,to creates List group with badges.
General Syntax
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox<span class="badge badge-primary badge-pill">18</span>
</li>
</ul>
Source Code
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-secondary badge-pill">85</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Messages
<span class="badge bg-info badge-pill">88</span>
</li>
</ul>
Try it yourself
Source Code : Output