List style position

Utilities for controlling the position of bullets/numbers in lists


Class reference

ClassProperties
list-insidelist-style-position: inside;
list-outsidelist-style-position: outside;

# Usage

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

.list-inside

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-outside

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul class="list-inside bg-gray-200 ...">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
...
</ul>

<ul class="list-outside bg-gray-200 ...">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
...
</ul>
Using .markdown will override the list style position class

# Responsive

To control the list style position of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-inside to apply the list-inside utility at only medium screen sizes and above.

<ul class="list-outside md:list-inside">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<!-- ... -->
</ul>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.