List Style Type

Defines the style of a list item element.

Classes
Class Properties
list-none list-style: none;
list-disc list-style: disc;
list-decimal list-style: decimal;
Examples

.list-none

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
  • Maecenas pharetra convallis posuere morbi leo urna molestie.

.list-disc

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
  • Maecenas pharetra convallis posuere morbi leo urna molestie.

.list-decimal

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
  • Maecenas pharetra convallis posuere morbi leo urna molestie.

<div class="card" >
    <p>.list-none</p>
    <ul class="list-none">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
            Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
        </li>
        <li>
            Maecenas pharetra convallis posuere morbi leo urna molestie.
        </li>
    </ul>
    <p>.list-disc</p>
    <ul class="list-disc">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
            Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
        </li>
        <li>
            Maecenas pharetra convallis posuere morbi leo urna molestie.
        </li>
    </ul>
    <p>.list-decimal</p>
    <ul class="list-decimal">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
            Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
        </li>
        <li>
            Maecenas pharetra convallis posuere morbi leo urna molestie.
        </li>
    </ul>
</div>