📪List Style

List Style Type Classes

The following classes allow you to control the list-style-type property, which defines the appearance of list item markers.

.list-none

Removes any marker or bullets from the list items.

CSS equivalent: list-style-type: none;

Example usage:

<ul class="list-none">
  <li><!--List with no marker--></li>
</ul>

---

.list-disc

Sets the list marker to a disc, which is the default for unordered lists.

CSS equivalent: list-style-type: disc;

Example usage:

<ul class="list-disc">
  <li><!--List with disc marker--></li>
</ul>

---

.list-circle

Sets the list marker to an open circle.

CSS equivalent: list-style-type: circle;

Example usage:

<ul class="list-circle">
  <li><!--List with circle marker--></li>
</ul>

---

.list-square

Sets the list marker to a square.

CSS equivalent: list-style-type: square;

Example usage:

<ul class="list-square">
  <li><!--List with square marker--></li>
</ul>

---

.list-decimal

Sets the list marker to numbers(decimals), which is the default for ordered lists.

CSS equivalent: list-style-type: decimal;

Example usage:

<ol class="list-decimal">
  <li><!--List with decimals marker--></li>
</ol>

---

.list-decimal-leading-zero

Sets the list marker to numbers with a leading zero (01, 02, 03, etc.).

CSS equivalent: list-style-type: decimal-leading-zero;

Example usage:

<ol class="list-decimal-leading-zero">
  <li><!--List with decimal-leading-zero marker--></li>
</ol>

---

.list-lower-roman

Sets the list marker to lowercase Roman numerals (i, ii, iii, etc.).

CSS equivalent: list-style-type: lower-roman;

Example usage:

<ol class="list-lower-roman">
  <li><!--List with lower-roman marker--></li>
</ol>

---

.list-upper-roman

Sets the list marker to uppercase Roman numerals (I, II, III, etc.).

CSS equivalent: list-style-type: upper-roman;

Example usage:

<ol class="list-upper-roman">
  <li><!--List with upper-roman marker--></li>
</ol>

---

.list-lower-alpha

Sets the list marker to lowercase alphabetical characters (a, b, c, etc.).

CSS equivalent: list-style-type: lower-alpha;

Example usage:

<ol class="list-lower-alpha">
  <li><!--List with lower-alpha marker--></li>
</ol>

---

.list-upper-alpha

Sets the list marker to uppercase alphabetical characters (A, B, C, etc.).

CSS equivalent: list-style-type: upper-alpha;

Example usage:

<ol class="list-upper-alpha">
  <li><!--List with upper-alpha marker--></li>
</ol>

---

.list-lower-greek

Sets the list marker to lowercase Greek characters (α, β, γ, etc.).

CSS equivalent: list-style-type: lower-greek;

Example usage:

<ol class="list-lower-greek">
  <li><!--List with lower-greek marker--></li>
</ol>

---

.list-upper-greek

Sets the list marker to uppercase Greek characters (Α, Β, Γ, etc.).

CSS equivalent: list-style-type: upper-greek;

Example usage:

<ol class="list-upper-greek">
  <li><!--List with upper-greek marker--></li>
</ol>

---

.list-lower-latin

Sets the list marker to lowercase Latin characters (a, b, c, etc.).

CSS equivalent: list-style-type: lower-latin;

Example usage:

<ol class="list-lower-latin">
  <li><!--List with lower-latin marker--></li>
</ol>

---

.list-upper-latin

Sets the list marker to uppercase Latin characters (A, B, C, etc.).

CSS equivalent: list-style-type: upper-latin;

Example usage:

<ol class="list-upper-latin">
  <li><!--List with upper-latin marker--></li>
</ol>

---

.list-disclosure-closed

Sets the list marker to a closed disclosure triangle.

CSS equivalent: list-style-type: disclosure-closed;

Example usage:

<ul class="list-disclosure-closed">
  <li><!--List with disclosure-closed marker--></li>
</ul>

---

.list-disclosure-open

Sets the list marker to an open disclosure triangle.

CSS equivalent: list-style-type: disclosure-open;

Example usage:

<ul class="list-disclosure-open">
  <li><!--List with disclosure-open marker--></li>
</ul>

---

List Style Position Classes

These classes control the position of the list marker relative to the list item content.

.list-inside

Sets the list marker to appear inside the content box of the list item.

CSS equivalent: list-style-position: inside;

Example usage:

<ul class="list-inside">
  <li><!--List with list-inside position--></li>
</ul>

---

.list-outside

Sets the list marker to appear outside the content box of the list item.

CSS equivalent: list-style-position: outside;

Example usage:

<ul class="list-outside">
  <li><!--List with list-outside position--></li>
</ul>