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.

• 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

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.

• Display
  Retina: 13.3-inch
• Graphics
  Intel Iris Graphics 6100
• Storage
  500 GB Flash

Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

• Display
  Retina: 13.3-inch
• Graphics
  Intel Iris Graphics 6100
• Storage
  500 GB Flash