Basic
The most basic list group is an unordered list with list items and the proper classes.
Build upon it with the options that follow, or with your own CSS as needed.
- Retina: 13.3-inch Display
- Intel Iris Graphics 6100 Graphics
- 500 GB Flash Storage
- 3.1 GHz Intel Core i7 Processor
- 16 GB 1867 MHz DDR3 Memory
Small List Group
Add .list-group-sm
to make list group more compact.
- Retina: 13.3-inch Display
- Intel Iris Graphics 6100 Graphics
- 500 GB Flash Storage
- 3.1 GHz Intel Core i7 Processor
- 16 GB 1867 MHz DDR3 Memory
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).
- Retina: 13.3-inch Display
- Intel Iris Graphics 6100 Graphics
- 500 GB Flash Storage
- 3.1 GHz Intel Core i7 Processor
- 16 GB 1867 MHz DDR3 Memory
Borderless List Group
Add .list-group-borderless
for a list-group without borders.
- Retina: 13.3-inch Display
- Intel Iris Graphics 6100 Graphics
- 500 GB Flash Storage
- 3.1 GHz Intel Core i7 Processor
- 16 GB 1867 MHz DDR3 Memory
Striped List Group
Use .list-group-striped
to add zebra-striping to any list-group.
- Retina: 13.3-inch Display
- Intel Iris Graphics 6100 Graphics
- 500 GB Flash Storage
- 3.1 GHz Intel Core i7 Processor
- 16 GB 1867 MHz DDR3 Memory
With Icon
Add an icon to any list group item by adding .has-icon
.
Custom Content
-
Socrates Itumay
Customer ID#00222 -
Reynante Labares
Customer ID#00221 -
Marianne Audrey
Customer ID#00220
Horizontal List Group
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}
to make a list group horizontal starting at that breakpoint’s min-width.
-
DisplayRetina: 13.3-inch
-
GraphicsIntel Iris Graphics 6100
-
Storage500 GB Flash
Want equal-width list group items when horizontal? Add .flex-fill
to each list group item.
-
DisplayRetina: 13.3-inch
-
GraphicsIntel Iris Graphics 6100
-
Storage500 GB Flash