{% set title = 'List Group' %} {% set filename = 'component-list-group.html' %} {% extends 'src/layouts/master.html' %} {% block content %}
List groups are a flexible and powerful component for displaying a series of content.
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
Add .disabled
to a .list-group-item
to gray it out to appear
disabled.
Place checkboxes and radios within list group items and customize as needed.
Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Use contextual classes to style list items, default or linked. Also includes .active state.
Add .list-group-horizontal
to change the layout of list group items from
vertical to
horizontal across all breakpoints.choose a responsive variantcode
.list-group-horizontal-{sm|md|lg|xl}
to make a list group horizontal starting
at that
breakpoint’s min-width.