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.
Use the .list-unstyled
utility with <ul>
or <ol>
elements to create an unstyled list without any padding.
List position
Use .list-inside
and .list-outside
to set the position of the markers in a list to inside and outside, respectively.
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",
);