List
Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.
Unordered Lists
List with bullets
In the default unordered list the bullets are in circle shape.
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
List with no bullets
Unordered list with no bullets can be used on navigation. Use
.no-bullets class to remove bullets .
- list item 1
- list item 2
- list item 3
Ordered List
Ordered Bullet List
Ordered list can be used for any steps that must go in particular order. There are many types of bullets that we can use in ordered list.
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Reversed ordered list
- List item 1
- List item 2
- List item 3
Inline List
- list item 1
- list item 2
- list item 3
Notification Stacked List
For notification stacked list you can use unorder list with no
bullets by adding .no-bullet class as shown above
and add any content you want inside the li to
show notifications. Here is example of snackbar notification
list.