• Home
  • Web Apps
    Web Apps Overview Design Toolkits
    Documentation
    Version 3 stable Version 4 stable
  • iOS
  • Android
  •  Contact Us
  •  Collaborate on Teams
  •  Contribute on GitHub
Version 3 stable
Version 4 stable
Web Apps Overview Setup
CDN / Preferred NPM / Managed Dependencies Pre-built React
Design Toolkits Component Samples Themes
Overview Gray / Light
Gray / Dark
Blue / Light
Blue / Dark
Grid System
Overview
Container Fluid Container Columns Offsets
Foundations
Typography
Roboto Headings Text Weights Text Alignment Body Text Contextual Alternatives Lists Blockquotes Monospace Keyboard Shortcuts Code Snippets
Iconography
Font Awesome Color Meaning
Colors
Brand Contextual Alternatives Backgrounds Palette
Material / Shadows
Basic Whiteframe / Card Depth
Buttons
Raised Buttons
Styles Usage Sizes Dropdowns / Dropups Block Buttons Groups Radio / Checkbox Groups Toolbars
Flat Buttons
Styles Sizes Dropdowns / Dropups Block Buttons Groups Radio / Checkbox Groups Toolbars
Icon Buttons
Basic Styled Segmented
Floating Action Buttons
Basic Mini Speed Dial
Forms
Overview Input Types
Text Inputs Plain Text Checkboxes Switches Radios Select / Multi-select File Browser Date / Time Pickers Form Buttons
Input Sizes Input Groups
Text Addons Checkbox / Radio Addons Button Addons Dropdown Addons
Help Text Validation States Required and Optional Inputs Horizontal Forms
Text Inputs Plain Text Checkboxes Switches Radios Select / Multi-select File Browser Date / Time Pickers Form Buttons
Inline Forms
Basic Borderless Forms Search Forms
Sliders
Navigation
Navbar
Dark Light Depth Contextual Buttons
Banner Bar
Internal External Brand Logo
Bottom Nav Drawer / Sidebar
Default Inverse Backdrop Overflow Collapsible Groups
Dropdowns Toolbars
Basic Primary Action Inputs Sizes Flat Variant
Tabs
Basic Inverse Variant Pill Variant Stacked Pills
Steppers
Vertical Variant Horizontal Variant
Breadcrumbs Pagination
Default Round Variant Pager
Containers
Panels / Cards
Basic Flat Panels Hoverable Panels Sections Contextual Alternatives Expandable Groups
List Groups
Basic Separators Custom Content
Jumbotron Splash Screen
Static Active
Wells
Indicators
Progress Indicators
Progress Bar Spinner
Alerts Badges / Labels
Content
Tables
Basic Striped Rows Condensed Rows Mixed Content
Images Media Objects Chips
Overlays
Tooltips Popovers Dialogs / Modals Toasts
Toast Container Block Toast Pill Toast
Utilities
Borders
Additive Subtractive Color
Display
Notation Examples
Flex
Enable Flex Layout Direction Justify Content Align Items Align Self Auto Margins Wrap Order Align Content
Sizing
Width Height
Spacing
How It Works Notation
Charts and Graphs
Color Palettes
Categorical Data Semantic Data Sequential Data
Typography
Font Families Font Weights
Chart Types
Bar Chart (Horizontal) Bar Chart (Vertical) Line Chart
Examples
External Website
Login Page
Web App
Website
Table
Splash Screen
Built with Bootstrap 4 B

List Groups

  • Contents
  • Basic
  • Separators
  • Custom Content

Learn more

To learn more visit Bootstrap's List Group documentation.

List Groups

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

Active Item

List group items can be .active.

Cras justo odio Dapibus ac facilisis in Morbi leo risus

Separators

List groups can be given optional horizontal separators by adding the .list-group-separated class.

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

Custom Content

List groups support custom HTML content.

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Third-party Content Disclaimer