Introduction
Getting Started
Colors
Typography
Elements
Button
Image
Input
List
Views
Alert
Avatar
Badge
Card
Modules
Grid
Modal
Navigation
Rating
Slider
Toast

Lists

List is a collection of related items. There are 2 types of lists: Ordered and Unordered.

Ordered List

Ordered list is used when you want to rank or number the items in an order.

  1. First list item
  2. Second list item
  3. Third list item
  4. Fourth list item
            
                <ol class="list-group list-group-roman mx-auto">
                    <li class="list-group-item">First list item</li>
                    <li class="list-group-item">Second list item</li>
                    <li class="list-group-item">Third list item</li>
                    <li class="list-group-item">Fourth list item</li>
                  </ol>

Unordered List

Unordered list is used when you want don't want to specify any ordered to the items.

  • First list item
  • Second list item
  • Third list item
  • Fourth list item
            
                <ul class="list-group mx-auto">
                  <li class="list-group-item">First list item</li>
                  <li class="list-group-item">Second list item</li>
                  <li class="list-group-item">Third list item</li>
                  <li class="list-group-item">Fourth list item</li>
                </ul>

Colored Lists

List items can be marked as active or highlighted by adding our color utils classes to the list item.

  • First list item
  • Second list item
  • Third list item
  • Fourth list item
  1. First list item
  2. Second list item (Colored bold)
  3. Third list item (Colored)
  4. Fourth list item
            
                <!-- unordered colored list -->
                <ul class="list-group">
                    <!-- class (primary) -->
                    <li class="list-group-item primary">First list item</li>
                    <li class="list-group-item">Second list item</li>
                    <!-- class (info) -->
                    <li class="list-group-item info">Third list item</li>
                    <li class="list-group-item">Fourth list item</li>
                  </ul>

                  <!-- ordered colored list  -->
                <ol class="list-group list-group-alpha">
                    <li class="list-group-item">First list item</li>
                    <!-- class (info-text) -->
                    <li class="list-group-item info-text font-w-700">Second list item (Colored bold)</li>
                    <!-- class (danger-text) -->
                    <li class="list-group-item danger-text">Third list item (Colored)</li>
                    <li class="list-group-item">Fourth list item</li>
                </ol>

Disabled Item

List items can be marked as disabled by adding class: disabled-item

  • First list item (Disabled)
  • Second list item
  • Third list item
  • Fourth list item
              
                <ul class="list-group mx-auto">
                    <li class="list-group-item disabled-item">
                      First list item (Disabled)
                    </li>
                    <li class="list-group-item">Second list item</li>
                    <li class="list-group-item">Third list item</li>
                    <li class="list-group-item">Fourth list item</li>
                </ul>

Stacked List

Stacked List can be used to notify the user of all the notifications at one place

  • Check this out

    2 days ago

    New Notification alert from Dazzle Cerashop

    Click here to know more

  • Get Upto 20% OFF

    4 days ago

    Offer valid till 20th April, 2022

    Click here to know more 

              
                <ul class="list-group mx-auto">
                    <li class="list-group-item disabled-item">
                      First list item (Disabled)
                    </li>
                    <li class="list-group-item">Second list item</li>
                    <li class="list-group-item">Third list item</li>
                    <li class="list-group-item">Fourth list item</li>
                </ul>