Lists

By default, lists appear as shown below.

  • Unordered List Item 1
    • Sub Item 1
    • Sub Item 2
  • Unordered List Item 2
  • Unordered List Item 3
  1. Ordered List Item 1
    1. Sub Item 1
    2. Sub Item 2
  2. Ordered List Item 2
  3. Ordered List Item 3

There are a few classes available to customize the appearance of lists.

Adding the class indent will indent the list.

HTML
<ul class="indent">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Rendered HTML
  • Item 1
  • Item 2
  • Item 3

Adding the class no-bullets will remove the bullets.

HTML
<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Rendered HTML
  • Item 1
  • Item 2
  • Item 3

Adding the class inline-list will create a horizontal list without bullets.

HTML
<ul class="inline-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
Rendered HTML
  • Item 1
  • Item 2
  • Item 3