Demonstration and documentation

Leaders list

Good for a table of statistics, or contents.

Unordered lists

Use an unordered list to... list things, if the order of the items doesn't matter.

Ordered lists

Use an ol when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

No-bullet list

Think bullets are for chumps? Use class .no-bullet.

Definition list

A definition list (<dl>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>).

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.

Icon list

Want to use the font icons as your "bullet"? Add the class .icon-bullet to your <li> and then insert the icon code at the start of list item.

Horizontal list (AKA: pagers)

Have items you want to show horizontall and a using the grid layout is too much, here are a few of techniques:

Horizontal items

Combine a ul with class .inline.

Badge

Combine a ul with class .inline, then give your li a .badge.

The .lead class on the ul bumps up the size of the font.

Pager

Read more links

You can read more as a button, if it's a primary call to action, or a link, if it's not as important.

High priority read more links
Read more
Lower priority read more links
Read more