1. Home ›
  2. Documentation ›
  3. Working with Content ›
  4. Lists & Tables

Lists & Tables

Lists

Unordered Lists

For a standard bulleted list, an unordered list (ul) can be used.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Eget porttitor lorem
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Eget porttitor lorem</li>
</ul>

Ordered Lists

To display the numbers of the items in the list, an ordered list (ol) can be used.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Eget porttitor lorem
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Eget porttitor lorem</li>
</ol>

The numeric order of an ordered list can also be reversed if needed.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Eget porttitor lorem
<ol reversed>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Eget porttitor lorem</li>
</ol>

Unstyled Lists

The .no-bullets class will remove the default bullets and padding from a list.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Eget porttitor lorem
<ul class="no-bullets">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Eget porttitor lorem</li>
</ul>

Inline Lists

List items can be displayed inline (horizontally) by using the .list-inline class.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Details & Summary Elements

The <details> element is a way to toggle the visibility of content. When closed, only the <summary> element is visible. When expanded, all content is visible. FAQ pages are one example where a list of <details> may be appropriate.

Summary Number One

Details for Summary Number One. Euismod donec id elit non mi porta gravida at eget metus. Malesuada porta etiam porta sem malesuada magna mollis euismod.

Summary Number Two

Details for Summary Number Two. Euismod donec id elit non mi porta gravida at eget metus. Malesuada porta etiam porta sem malesuada magna mollis euismod.

<details>
  <summary>Summary Number One</summary>
  <p>Details for Summary Number One. Euismod donec id elit non mi porta gravida at eget metus. Malesuada porta etiam porta sem malesuada magna mollis euismod.</p>
</details>

<details>
  <summary>Summary Number Two</summary>
  <p>Details for Summary Number Two. Euismod donec id elit non mi porta gravida at eget metus. Malesuada porta etiam porta sem malesuada magna mollis euismod.</p>
</details>

Description List

A Description List (<dl>) can be used to display groups of terms and descriptions. Common uses for this element are implementing a glossary or displaying meta data (a list of key-value pairs). FAQ pages are another use case.

Term 1
A description list is perfect for defining terms.
Term 2
Donec id elit non mi porta gravida at eget metus.
Term 3
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <!-- Each group includes one <dt> and at least one <dd> -->
  <dt>Term 1</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt>Term 2</dt>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>

  <dt>Term 3</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

The .list-grid class will format a list into a simple two-column grid. This can useful in lining up the titles and definitions.

Term 1
A description list is perfect for defining terms.
Term 2
Donec id elit non mi porta gravida at eget metus.
Term 3
Etiam porta sem malesuada magna mollis euismod.
<dl class="list-grid">
  <dt>Term 1</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Term 2</dt>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Term 3</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Tables

This is a standard table. Tables are intended to be used with tabular data. Tables can be difficult to read on narrow screens (mobile devices), and we encourage users to avoid them when other formatting options are a possibility.

Header 1 Header 2 Header 3 Header 4
Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 1 column 4
Alpha Beta Gamma Delta
$19.95 A bolded item Example table An ITALIC item 
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 column 1</td>
      <td>Row 1 column 2</td>
      <td>Row 1 column 3</td>
      <td>Row 1 column 4</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Beta</td>
      <td>Gamma</td>
      <td>Delta</td>
    </tr>
    <tr>
      <td>$19.95</td>
      <td><strong>A bolded item</strong></td>
      <td>Example table</td>
      <td><em>An ITALIC item</em></td>
    </tr>
  </tbody>
</table>