List

Lists can be used to display a set of items in a organised manner.

Horizontal List

Use the class .list , then use .list-hr to make list vertical.

  • Item-1
  • Item-2
  • Item-3
  • Item-4
    • 
<div class="list list-hr">
<li class="list-item">Item-1</li>
<li class="list-item">Item-2</li>
<li class="list-item">Item-3</li>
<li class="list-item">Item-4</li>
</div>
    Vertical List

    Use the class .list , then use .list-vr to make list vertical.

  • Item-1
  • Item-2
  • Item-3
  • Item-4
    • 
<div class="list list-vr">
<li class="list-item">Item-1</li>
<li class="list-item">Item-2</li>
<li class="list-item">Item-3</li>
<li class="list-item">Item-4</li>
</div>
    Bullet List

    Use the class .list , then use .list-item-disc for li-items to give style to list items.

  • Item-1
  • Item-2
  • Item-3
  • Item-4
    • 
<div class="list list-hr">
<li class="list-item list-item-disc">Item-1</li>
<li class="list-item list-item-disc">Item-2</li>
<li class="list-item list-item-disc">Item-3</li>
<li class="list-item list-item-disc">Item-4</li>
</div>
    Numbered List

    Use the class .list , then use .list-item-num for li-items to give style to list items.

  • Item-1
  • Item-2
  • Item-3
  • Item-4
    • 
<div class="list list-hr">
<li class="list-item list-item-num">Item-1</li>
<li class="list-item list-item-num">Item-2</li>
<li class="list-item list-item-num">Item-3</li>
<li class="list-item list-item-num">Item-4</li>
</div>
    Typography
    Rating