Lists

The following applies to both ordered and unordered lists.

Examples

Default

When no classes are used for styling.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Flush Left

Display list items left-aligned with the content above and below. Use the list-flush-left class.

<ul class="list-flush-left">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Inline

Display the list items horizontally rather than vertically. Use the list-inline class. The cnqr-separated class can be used to show dividers between list items.

<ul class="list-inline">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul class="list-inline cnqr-separated">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>