Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 List Groups

List Groups are used to display a series of content in an organized way.


Basic List Groups

The most basic list group is an unordered list with list items and the proper classes.

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

To create a list group, use an <ul> element with .list-group class, and <li> elements with .list-group-item class:

Run code

Active Items

  • Active Item
  • Second Item
  • Third Item
  • Fourth Item

Add .active to a .list-group-item to indicate the current active selection:

Run code

Disabled Items

  • Disabled Item
  • Second Item
  • Third Item
  • Fourth Item

Add .disabled to a .list-group-item to make it appear disabled.

The .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:

Run code

Flush Borders

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container:

Run code

Horizontal List Groups

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints:

Run code

Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width:

Run code

List Group with Badges

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

  • Inbox14
  • Draft2
  • Sent1
Run code

List Group with Links and Buttons

Use <a> or <button> to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action:

Run code

Contextual Classes

Use contextual classes to style list items with a stateful background and color.

  • Default
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

The following example shows all list group contextual classes:

Run code

Link Items with Contextual Classes

Contextual classes also work with .list-group-item-action.

Note the addition of the hover styles here not present in the previous example.

Run code

List Group with Custom Content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities: