Lists

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Example of Unordered List with bullets

Add class according to bullet style. Copy html code below and add your desired list items.

  • One
  • Two
  • Three
  • One
  • Two
  • Three
  • One
  • Two
  • Three

Example of Ordered List with bullets

Add class according to bullet style. Copy html code below and add your desired list items.

  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. Reversed Item list
  2. Reversed Item list
  3. Reversed Item list
  1. Item list with Capital Alphabets
  2. Item list with Capital Alphabets
  3. Item list with Capital Alphabets
  1. Item list with lower roman
  2. Item list with lower roman
  3. Item list with lower roman

Example of List with no bullets.

If you want list stacked but with no bullet and indentation, then you can add .list-style-none class.

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

Example of List with inline items.

If you want list items in same line instead of stacked, you can add list-inline class to make it inline. And you can also add list-style-none class to remove bullets.

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

Example of Notification Stacked List.

    chicken-tandoori
    Your food is on its way. Order id : #5421112 Time : 10.50PM Total Amount : $50
    biryani
    Your food is on its way. Order id : #5421112 Time : 10.50PM Total Amount : $50