List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).


  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one


  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one


Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Checkboxes and radios

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s.

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

Links and buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.



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. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • An active item
  • A disabled item
  • A third item
  • A fourth item
  • And a fifth one


Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.

  1. A list item
  2. A list item
  3. A list item


Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

  • A list item 14
  • A second list item 2
  • A third list item 1




CPU Load
CPU Temparature
RAM Usage
6,532 MB

Customer care



May 14, 2020

Upcoming events


Donec laoreet fringilla justo a pellentesque


Nunc quis massa nec enim


Praesent sit amet