Lists

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.
Bootstrap documentation

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

Sizing

Change .list-group-item padding with three sizing options.

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

Flush

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).

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

Additionally use .list-group-flush-x or .list-group-flush-y to remove only vertical or horizontal borders and paddings of a .list-group.