Lists

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Bootstrap documentation: List group Most of the details have been covered here Material Design guidelines: Lists Material Components for the web: List

In order not to break Bootstrap’s .list-group-items, Material UI keeps default display: block for these items.

NB. To append a button in the lists, HTML doesn’t allow to nest buttons or link elements. Use HTML list <li> instead. The counterpart is that <li> don’t keep the :focus styling after clicking.

One-line lists

For a single list, keep Bootstrap’s default markup <li class="list-group-item list-group-item-action">List item</li>. Just add .d-flex utility class for perfect alignment (except if single text-only, no extra markup needed).

Single-line items : After list text

You can append various elements to a list: Text or icon :

For a text, wrap your text in a span like Your text.
For an icon, use your icon markup and add class list-group-item-meta info.
For a button, use this markup : <a class="btn btn-icon ml-auto" href="#">info</a>.

If you expect a long main text, wrap it in a Long text goes here.

List item
List item
List item with icon info
List item with Button more_vert
List item with Text Meta
List item with a very long text to test the behavior when text is too big for the one-line list. Here is some extra text to test the info

<ul class="list-group">
  <li class="list-group-item list-group-item-action">List item</li>
  <li class="list-group-item list-group-item-action d-flex">List item</li>
  <li class="list-group-item list-group-item-action d-flex">
    List item with icon
    <span class="material-icons list-group-item-meta">info</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    List item with Button
    <a class="btn btn-icon ml-auto" href="#"><span class="material-icons">more_vert</span></a>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    List item with Text
    <span class="list-group-item-meta">Meta</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="list-group-item-text">List item with a very long text to test the behavior when text is too big for the one-line list. Here is some extra text to test the </span>
    <a class="btn btn-icon ml-auto" href="#"><span class="material-icons">info</span></a>
  </li>
</ul>

Single-line items with icon

To prepend an icon, just add your icon markup with .list-group-item-icon class. Material UI is compatible with any icon set (SVG, Material icons, FontAwesome 4 or 5, …).

List item
List item with svg icon
List item with icon info
List item with Button more_vert
List item with Text Meta

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    List item
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <svg class="list-group-item-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none" /><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg>
    List item with svg icon
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    List item with icon
    <span class="material-icons list-group-item-meta">info</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    List item with Button
    <a class="btn btn-icon ml-auto" href="#"><span class="material-icons">more_vert</span></a>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    List item with Text
    <span class="list-group-item-meta">Meta</span>
  </li>
</ul>

Single-line items with graphic

You can still use a Font icon or a svg for your graphic. Set class .list-group-item-graphic on it.

List item with svg icon
List item with appended icon info
List item with material icon and Button more_vert
List item with Text Meta

<ul class="list-group my-3">
  <li class="list-group-item list-group-item-action d-flex">
      <svg class="list-group-item-graphic" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" /><path d="M0 0h24v24H0z" fill="none" /></svg>
    List item with svg icon
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    List item with appended icon
    <span class="material-icons list-group-item-meta">info</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    List item with material icon and Button
    <a class="btn btn-icon ml-auto" href="#"><span class="material-icons">more_vert</span></a>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    List item with Text
    <span class="list-group-item-meta">Meta</span>
  </li>
</ul>

Two-line lists

You need this markup in order to style properly a two-line list : <li class="list-group-item list-group-item-action d-flex list-group-item-two-line"></li>.

Compared to the one-line list, we have just added CSS class .list-group-item-two-line.

Both primary and secondary text must be wrapped in a separate , and both texts are wrapped in a  for perfect positioning.

Text and button can be appended as for single-line lists.

Two-line list : After list text

List item title Secondary text
List item title with icon Secondary text info
List item title with icon Secondary text more_vert
List item title with Text Secondary text Meta

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="list-group-item-text">
      <span>List item title</span>
      <span>Secondary text</span>
    </span>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="list-group-item-text">
      <span>List item title with icon</span>
      <span>Secondary text</span>
    </span>
    <span class="material-icons list-group-item-meta">info</span>
   </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="list-group-item-text">
      <span>List item title with icon</span>
      <span>Secondary text</span>
    </span>
    <a class="btn btn-icon ml-auto" href="#">
      <span class="material-icons">more_vert</span>
    </a>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="list-group-item-text">
      <span>List item title with Text</span>
      <span>Secondary text</span>
    </span>
    <span class="list-group-item-meta">Meta</span>
   </li>
</ul>

Two-line list with icon

Same as single-line item with icon : add .list-group-item-icon class to your icon.

List item title Secondary text
List item title with Text Secondary text info
List item title with icon Secondary text more_vert
List item title with Text Secondary text Meta

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    <span class="list-group-item-text">
      <span>List item title</span>
      <span>Secondary text</span>
    </span>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    <span class="list-group-item-text">
      <span>List item title with Text</span>
      <span>Secondary text</span>
    </span>
    <span class="material-icons list-group-item-meta">info</span>
   </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    <span class="list-group-item-text">
      <span>List item title with icon</span>
      <span>Secondary text</span>
    </span>
    <a class="btn btn-icon ml-auto" href="#">
      <span class="material-icons">more_vert</span>
    </a>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-icon" aria-hidden="true">favorite</span>
    <span class="list-group-item-text">
      <span>List item title with Text</span>
      <span>Secondary text</span>
    </span>
    <span class="list-group-item-meta">Meta</span>
   </li>
</ul>

Two-line list with graphic

List item title with SVG Secondary text
List item title with Text Secondary text info
List item title with icon/button Secondary text more_vert
List item title with Text Secondary text Meta

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <svg class="list-group-item-graphic" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" /><path d="M0 0h24v24H0z" fill="none" /></svg>
    <span class="list-group-item-text">
      <span>List item title with SVG</span>
      <span>Secondary text</span>
    </span>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    <span class="list-group-item-text">
      <span>List item title with Text</span>
      <span>Secondary text</span>
    </span>
    <span class="material-icons list-group-item-meta">info</span>
   </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    <span class="list-group-item-text">
      <span>List item title with icon/button</span>
      <span>Secondary text</span>
    </span>
    <a class="btn btn-icon ml-auto" href="#">
      <span class="material-icons">more_vert</span>
    </a>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">account_circle</span>
    <span class="list-group-item-text">
      <span>List item title with Text</span>
      <span>Secondary text</span>
    </span>
    <span class="list-group-item-meta">Meta</span>
   </li>
</ul>

Activated item

You can use default Bootstrap’s active state for list items.

Inbox
Star
Send
Drafts

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">inbox</span>
    Inbox
  </li>
  <li class="list-group-item active list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">star</span>
    Star
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">send</span>
    Send
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">drafts</span>
    Drafts
  </li>
</ul>

List with shaped activated item

Same as previous example. Just add .list-group-shaped CSS class to your <ul class="list-group">.

Inbox
Star
Send
Drafts

<ul class="list-group list-group-shaped">
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">inbox</span>
    Inbox
  </li>
  <li class="list-group-item active list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">star</span>
    Star
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">send</span>
    Send
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <span class="material-icons list-group-item-icon" aria-hidden="true">drafts</span>
    Drafts
  </li>
</ul>

List separator

To insert a separator in your lists, simply add this element <li class="list-group-divider" role="separator"></li>.

Dog photos 9 Jan 2018 info
Cat photos 22 Dec 2017 info
Potatoes 30 Nov 2017 info
Carrots 17 Oct 2017 info

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">folder</span>
    <span class="list-group-item-text">
      <span>Dog photos</span>
      <span>9 Jan 2018</span>
    </span>
    <span class="list-group-item-meta material-icons">info</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">folder</span>
    <span class="list-group-item-text">
      <span>Cat photos</span>
      <span>22 Dec 2017</span>
    </span>
    <span class="list-group-item-meta material-icons">info</span>
  </li>
  <li class="list-group-divider" role="separator"></li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">folder</span>
    <span class="list-group-item-text">
      <span>Potatoes</span>
      <span>30 Nov 2017</span>
    </span>
    <span class="list-group-item-meta material-icons">info</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex list-group-item-two-line">
    <span class="material-icons list-group-item-graphic" aria-hidden="true">folder</span>
    <span class="list-group-item-text">
      <span>Carrots</span>
      <span>17 Oct 2017</span>
    </span>
    <span class="list-group-item-meta material-icons">info</span>
  </li>
</ul>

List with selection controls

You can even use Bootstrap’s default selection controls within your Lists. Don’t change your HTML markup, just add .d-flex class to each .list-group-item.

List with Trailing Checkbox

Dog Photos
Cat Photos
Potatoes
Carrots

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Dog Photos</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck2">
      <label class="custom-control-label" for="customCheck2">Cat Photos</label>
    </div>
  </li>
  <li class="list-group-divider" role="separator"></li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck3">
      <label class="custom-control-label" for="customCheck3">Potatoes</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck4">
      <label class="custom-control-label" for="customCheck4">Carrots</label>
    </div>
  </li>
</ul>

List with Trailing Radio Buttons

Dog Photos
Cat Photos
Potatoes
Carrots

<ul class="list-group">
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio">
      <label class="custom-control-label" for="customRadio1">Dog Photos</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio2" name="customRadio">
      <label class="custom-control-label" for="customRadio2">Cat Photos</label>
    </div>
  </li>
  <li class="list-group-divider" role="separator"></li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio3" name="customRadio">
      <label class="custom-control-label" for="customRadio3">Potatoes</label>
    </div>
  </li>
  <li class="list-group-item list-group-item-action d-flex">
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customRadio4" name="customRadio">
      <label class="custom-control-label" for="customRadio4">Carrots</label>
    </div>
  </li>
</ul>

One-line lists
Two-line lists
Activated item
- List with shaped activated item
List separator
List with selection controls
- List with Trailing Checkbox
- List with Trailing Radio Buttons