Skip to main content Skip to docs navigation
View on GitHub

List group

Bootstrap’s default list group component is extended with a few additional features.

On this page

Examples

New to the theme is a header for list groups, similar to panels. use it for standalone lists as needed. This should not be used with panels.

  • List group header
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
html 
<ul class="list-group">
  <li class="list-group-header">List group header</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Progress

Similar to stat lists, add a background progress indicator to any list group item.

  • Cras justo odio
  • Porta ac consectetur ac
  • Vestibulum at eros
html 
<ul class="list-group">
  <li class="list-group-item list-group-progress">
    Cras justo odio
    <span class="list-group-progress-bar" style="width: 75%;"></span>
  </li>
  <li class="list-group-item list-group-progress">
    Porta ac consectetur ac
    <span class="list-group-progress-bar" style="width: 50%;"></span>
  </li>
  <li class="list-group-item list-group-progress">
    Vestibulum at eros
    <span class="list-group-progress-bar" style="width: 25%;"></span>
  </li>
</ul>

CSS

Sass variables

$list-group-header-padding-x:     $spacer * 1.25;
$list-group-header-padding-y:     $spacer;
$list-group-header-margin-bottom: $spacer * .1;
$list-group-header-color:         inherit;

$list-group-progress-bg:          darken($body-bg, 3%);