Lists
Utilities for controlling list styling.
Classes
| Class | Output |
|---|---|
| .d-ls-reset | margin: 0; padding: 0; list-style: none !important; |
| .d-ls-none | list-style: none !important; |
| .d-lst-none | list-style-type: none !important; |
| .d-lst-disc | list-style-type: disc !important; |
| .d-lst-circle | list-style-type: circle !important; |
| .d-lst-content | list-style-type: var(--ls-content) !important; |
| .d-lst-decimal | list-style-type: decimal !important; |
| .d-lst-unset | list-style-type: unset !important; |
Resetting a list
Use d-ls-reset to reset the margin, padding, and list-style-type of a list. Reseting a list applies to the parent ol or ul, any child li elements, and any child ol or ul elements.
<ul class="d-ls-reset">
<li>...</li>
<li>
<ol>
<li>...</li>
<li>...</li>
</ol>
</li>
<li>...</li>
</ul>
Changing the list style type
Use d-ls-{disc|decimal} to change an unordered list's bullet styling.
<ul class="d-lst-disc">
<li>...</li>
<li>
<ul class="d-lst-circle">
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li class="d-lst-content" style="--ls-content: '✅'">...</li>
<li class="d-lst-content" style="--ls-content: '❌'">...</li>
</ul>
</li>
</ul>