Typography

List Style Position

Utilities for controlling the position of bullets/numbers in lists.

Quick reference

Class	Description
list-inside	list-style-position: inside
list-outside	list-style-position: outside

Basic usage

Setting the list style position

Control the position of the markers and text indentation in a list using the list-inside and list-outside utilities.

list-inside

• 5 cups of coffee with enough caffeine to show how the line breaks
• 0 cups of tea
• 0 cups of water

list-outside

• 5 cups of coffee with enough caffeine to show how the line breaks
• 0 cups of tea
• 0 cups of water

<ul class="list-inside ...">
  <li>5 cups of coffee</li>
  <!-- ... -->
</ul>
<ul class="list-outside ...">
  <li>5 cups of coffee</li>
  <!-- ... -->
</ul>