List Group

List groups are used for displaying a series of content. You can create list groups with unordered list or links or buttons.

How to use

Using Unordered list

Create an unordered list and add .list-group class for <ul> element. Apply .list-group-item for the <li> elements. You can also add your own CSS as needed.

Active items

Add .active to a .list-group-item to indicate the active items.

Disabled items

Add .disabled to a .list-group-item to make an item appear disabled. Use custom JavaScript if you want to fully disable click events for some elements. (e.g., links).

Links and Buttons

Add .list-group-item-action when you use <a>s or <button>s to create actionable list group items with hover, disabled, and active states.

Using Links

.list-group-item-action is applied to <a>

Using Buttons

.list-group-item-action is applied to <button>. Dont use .btn classes here. With <button>s, you can also make use of the disabled attribute instead of the .disabled class.

Flush

Add .list-group-flush to remove outer border and rounded corners container(.list-group class applied element).

Contextual classes

Use contextual classes to apply background and color of list items.

'list-group-item-primary', 'list-group-item-secondary', 'list-group-item-success', 'list-group-item-danger', 'list-group-item-warning', 'list-group-item-info', 'list-group-item-light', 'list-group-item-dark'

Add contextual classes to .list-group-item-action as well. You can see hover styles here. Add .active class to indicate an active selection on a contextual list group item.

Note

Note Accessibility

Using color to only provides a visual indication. To support assistive technologies such as screen readers ensure to provide additional information denoted by the color by means of additional text hidden with the .sr-only class.

With badges

Add badges to any list group item to show unread counts etc. Customize styles with the help of utilities as needed.

Custom content

Add any HTML within as in given example and customize with the help of flexbox utilities.

JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our list group to create tabbable panes of local content.

<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="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Using data attributes

You can activate a list group navigation without writing any JavaScript by simply specifying data-toggle="list" or on an element. Use these data attributes on .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Via JavaScript

Enable tabbable list item via JavaScript (each list item needs to be activated individually):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

You can activate individual list item in several ways:

Copy

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Fade effect

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Methods

$().tab

Activates a list item element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

Copy

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab(‘show’)

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tabevent occurs).

Copy

$('#someListItem').tab('show')

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tabevent)

If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
show.bs.tab	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

Copy

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})