List

Unordered list

Unordered lists use the .bf-ul class on a <ul>, with .bf-li on each <li>.

Ordered list

Ordered (numbered) lists use the .bf-ol class on an <ol>, also with .bf-li on each <li>.

Table of contents

For table of contents styling, use the .bf-toc class on an ordered list. We recommend using the .bf-title-link class on the links:

Without classes

Wrapping content in .bf-elements applies styling to nested <ul>, <ol>, and <li> elements without needing .bf-ul, .bf-ol, or .bf-li.

See Typography for details. The following two examples would render the same:

<div>
  <ul class="bf-ul">
    <li class="bf-li">Unordered list</li>
  </ul>
</div>

<div class="bf-elements">
  <ul>
    <li>Unordered list</li>
  </ul>
</div>

If you want top and bottom margins, use .bf-content. This can be useful if you have pre-formatted html content.

<div class="bf-content">
  <ul>
    <li>Unordered list with space above and below</li>
  </ul>
</div>