--- layout: docs title: List groups group: material-design --- Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve the varieties specified. ([Specification](https://www.google.com/design/spec/components/lists.html#lists-specs)) The material classes introduced are:
Classes BS Equivalent Differences
.mdb-list-group-item .list-group-item {% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
.mdb-list-group-col {% markdown %}None{% endmarkdown %} {% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
.right {% markdown %}None{% endmarkdown %} {% markdown %}Flex layout marker - additional class needed when only one icon/label is present and it should be right aligned. Only valid as a child of `.mdb-list-group-item`{% endmarkdown %}
.mdb-list-group-sm {% markdown %}None{% endmarkdown %} {% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %}
## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Single line ### Text {% example html %} {% endexample %} ### Dense {% example html %} {% endexample %} ### Icons and labels {% example html %} {% endexample %} ## Double line ### Text {% example html %} {% endexample %} ### Dense {% example html %} {% endexample %} ### Icons and labels {% example html %} {% endexample %} ## Three line ### Text {% example html %} {% endexample %}