| 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.
<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.
<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.
<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",
);