To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item.
<ul class="list-group">
<li class="list-group-item">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">Bootstrap 3</li>
<li class="list-group-item">Bootstrap 4</li>
</ul>To add .active to a .list-group-item to indicate the current active selection. Add .disabled to a .list-group-item to make it appear disabled.
<ul class="list-group">
<li class="list-group-item active">HTML5 (active)</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item disabled">Bootstrap 3 (disabled)</li>
<li class="list-group-item">Bootstrap 4</li>
</ul>Use Bootstrap 4's .list-group-item-action to for linked list items. Linked list items result in the whole item being clickable (not just the text portion). The whole list item receives a "hover" style too.
To create a linked list group, swap the <ul> tag for a <div> tag and the <li> tags for <a>.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">HTML5</a>
<a href="#" class="list-group-item list-group-item-action">CSS3</a>
<a href="#" class="list-group-item list-group-item-action">Bootstrap 3</a>
<a href="#" class="list-group-item list-group-item-action">Bootstrap 4</a>
<a href="#" class="list-group-item list-group-item-action">JavaScript</a>
</div>Use <button> tags for the .list-group-item / .list-group-item-action classes.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">HTML5</button>
<button type="button" class="list-group-item list-group-item-action">CSS3</button>
<button type="button" class="list-group-item list-group-item-action">Bootstrap 3</button>
<button type="button" class="list-group-item list-group-item-action">Bootstrap 4</button>
<button type="button" class="list-group-item list-group-item-action">JavaScript</button>
</div>Add badges to any list group item to show unread counts, activity, and more...
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
HTML5
<span class="badge badge-primary badge-pill">27</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
CSS3
<span class="badge badge-primary badge-pill">23</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Bootstrap 3
<span class="badge badge-primary badge-pill">37</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Bootstrap 4
<span class="badge badge-primary badge-pill">32</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
JavaScript
<span class="badge badge-primary badge-pill">36</span>
</li>
</ul>Contextual classes can be used to color list items : .list-group-item-primary, .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
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary List Group</li>
<li class="list-group-item list-group-item-success">Success List Group</li>
<li class="list-group-item list-group-item-secondary">Secondary List Group</li>
<li class="list-group-item list-group-item-info">Info List Group</li>
<li class="list-group-item list-group-item-warning">Warning List Group</li>
<li class="list-group-item list-group-item-danger">Danger List Group</li>
<li class="list-group-item list-group-item-dark">Dark List Group</li>
<li class="list-group-item list-group-item-light">Light List Group</li>
</ul><div class="list-group">
<a href="#" class="list-group-item list-group-item-primary">Primary List Group</a>
<a href="#" class="list-group-item list-group-item-success">Success List Group</a>
<a href="#" class="list-group-item list-group-item-secondary">Secondary List Group</a>
<a href="#" class="list-group-item list-group-item-info">Info List Group</a>
<a href="#" class="list-group-item list-group-item-warning">Warning List Group</a>
<a href="#" class="list-group-item list-group-item-danger">Danger List Group</a>
<a href="#" class="list-group-item list-group-item-dark">Dark List Group</a>
<a href="#" class="list-group-item list-group-item-light">Light List Group</a>
</div>Bootstrap 4 has the .list-group-item-heading class for headings and the .list-group-item-text class for text.
<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">HTML5 Tutorial</h5>
<small>12/08/2017</small>
</div>
<p class="mb-1">HTML5 (No space between "HTML" and "5")is a markup language used
for structuring and presenting content on the World Wide Web. It is the fifth and
current version of the HTML standard.</p>
<small>Free Time Learn</small>
</a>
<a href="#" class="list-group-item list-group-item-warning list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">CSS3 Tutorial</h5>
<small class="text-muted">07/09/2017</small>
</div>
<p class="mb-1">The CSS was started to develop around 1998. And till 2009, it
was under development. The first working draft of CSS3 came in 19-01-2001. but it
was initially declared early in the June 1999.</p>
<small class="text-muted">Free Time Learn</small>
</a>
<a href="#" class="list-group-item list-group-item-success list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Bootstrap 4 Tutorial</h5>
<small class="text-muted">30/12/2017</small>
</div>
<p class="mb-1">Bootstrap 4 alpha 1 was released on 19th August 2015. Since then
there have been many alpha releases. And finally after that on 10th August 2017,
Bootstrap released the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2
was released on October 19th, 2017. </p>
<small class="text-muted">Free Time Learn</small>
</a>
</div>Bootstrap 4 list group to create tabbable panes.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#html5" role="tab" aria-controls="home">HTML5</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#css3" role="tab" aria-controls="profile">CSS3</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#bootstrap4" role="tab" aria-controls="messages">Bootstrap 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="html5" role="tabpanel" aria-labelledby="list-home-list">
<h4>HTML5 Introduction</h4>
HTML5 (No space between "HTML" and "5")is a markup language used
for structuring and presenting content on the World Wide Web. It is the fifth and
current version of the HTML standard.
</div>
<div class="tab-pane fade" id="css3" role="tabpanel" aria-labelledby="list-profile-list">
<h4>CSS3 Introduction</h4>
The CSS was started to develop around 1998. And till 2009, it
was under development. The first working draft of CSS3 came in 19-01-2001. but it
was initially declared early in the June 1999.
</div>
<div class="tab-pane fade" id="bootstrap4" role="tabpanel" aria-labelledby="list-messages-list">
<h4>Bootstrap 4 Introduction</h4>
Bootstrap 4 alpha 1 was released on 19th August 2015. Since then
there have been many alpha releases. And finally after that on 10th August 2017,
Bootstrap released the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2
was released on October 19th, 2017.
</div>
</div>
</div>
</div>Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.