List

Easily create nicely looking lists, which come in different styles.


Usage

To apply this component, add the .list class to an unordered or ordered list. The list will now display without any spacing or list-style.

Usage

  • Class Description
    .list Add this class to a <ul> element to create a list without any spacing or list-style.

    Modifiers

    Class Description
    .list-inline To display the list in a different style, just add a modifier class to the the .list class. The modifiers of the List component are not combinable with each other.
    .list-line Add the .list-line class to separate list items with lines.
    .list-striped Add zebra-striping to a list using the .list-striped class.
    .list-space Add the .list-space class to increase the spacing between list items.
    • List item 1
    • List item 2
    • List item 3
  • <ul class="list">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

Modifiers

To display the list in a different style, just add a modifier class to the the .list class. The modifiers of the List component are not combinable with each other.

List inline

Add the .list-inline class to display the list items horizontally.

Usage

    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
  • <ul class="list list-inline">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

List line

Add the .list-line class to separate list items with lines.

Usage

    • List item 1
    • List item 2
    • List item 3
  • <ul class="list list-line">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

List striped

Add zebra-striping to a list using the .list-striped class.

Usage

    • List item 1
    • List item 2
    • List item 3
  • <ul class="list list-striped">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

List space

Add the .list-space class to increase the spacing between list items.

Usage

    • This modifier may be useful for for list items with multiple lines of text.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  • <ul class="list list-space">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>