Bootstrap 4 List groups, How To Learn Bootstrap 4 List groups Tutorial

Bootstrap 4 Tutorial

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 :

Bootstrap 4 Tutorial