Scroll to Top

List

From List item whether ordered or UN-ordered, we have removed the bullets or numbers. default padding and margin is removed from it and material List is also introduced.

SITEMAP Documentation / Css / List

Default List is the standard lists and bullets are hidden. But you can over-ride them by adding bullet styles of your own choice.

Demo

  • List Item 01
  • List Item 02
  • List Item 03

Code copy

<ul>
    <li>List Item 01</li>

    <li>List Item 02</li>

    <li>List Item 03</li>
</ul>

Introducing the list item that is pre styled. we have not styled the original list much but we have provided with the styled list too. we called it material list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

<ul class="material-list">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

Bullet Styles are introduced as the class and user can easy manipulate these styles instantly.

add the disc style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

<ul class="list-disc">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the circle style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-circle">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the square style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-square">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the decimal style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-decimal">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the lower-greek style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-greek">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the upper-roman style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-roman">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the lower-latin style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-latin">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the upper-latin style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-latin">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the armenian style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-armenian">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the georgian style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-georgian">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the lower-alpha style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-lower-alpha">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

add the upper-alpha style bullet to the un-ordered list.

Demo

  • List item 1
  • List item 2
  • List item 3

Code copy

    <ul class="list-upper-alpha">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>

Feedback