Sections

List styles

Utilities for controlling the style and position of a list.

Class Properties
.list-none list-style-type: none;
.list-disc list-style-type: disc;
.list-decimal list-style-type: decimal;
.list-square list-style-type: square;
.list-unstyled padding-left: 0;
list-style: none;
.list-inside list-style-position: inside;
.list-outside list-style-position: outside;

Usage

List style

Use .list-disc and .list-decimal to create bullet and number lists, respectively.

.list-disc

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.

.list-decimal

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Integer eu vestibulum lectus, at porta dui.
  3. Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.

.list-square

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.

.list-none

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.
<ul class="list-disc">
  <li>...</li>
  ...
</ul>

<ul class="list-decimal">
  <li>...</li>
  ...
</ul>

<ul class="list-none">
  <li>...</li>
  ...
</ul>

Use the .list-unstyled utility with <ul> or <ol> elements to create an unstyled list without any padding.

.list-unstyled

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.
<ul class="list-unstyled">
  <li>...</li>
  ...
</ul>

List position

Use .list-inside and .list-outside to set the position of the markers in a list to inside and outside, respectively.

.list-inside

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.

.list-outside

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Integer eu vestibulum lectus, at porta dui.
  • Quisque vitae orci pretium, aliquam neque tempor, vulputate quam.
<ul class="list-inside">
  <li>...</li>
  ...
</ul>

<ul class="list-outside">
  <li>...</li>
  ...
</ul>

Variants

By default, no responsive or hover-state variants are generated for list style or position utilities.

Responsive

To include responsive variants like .md:list-none, add "list-style" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "list-style",
);

Hover-state

To include hover-state variants like .hover:list-none, add "list-style" to the $hover-variants variable:

$hover-variants: (
  // ...
  "list-style",
);