Bootstrap 4
Bootstrap 4 List groups
Bootstrap List groups are a flexible and powerful component for displaying a series of content. The list groups with custom content all with a distict style and functions.
Basic List Groups

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>
Output :
Active and Disabled States

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>
Output :
List Group with Links

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>
Output :
List Group with Buttons

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>
Output :
List Group with Badges

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>
Output :
Contextual Classes

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>
Output :
<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>
Output :
Custom Content

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>
Output :
Tabbable Panes

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>
Output :

We see you’re using an ad blocker.

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.