tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 LISTS



You can create three different types of list in HTML:

  • Ordered list - An ordered list is a list of items whose items are marked by different numbering bullets, example: 1, i, a, A etc.
  • Unordered list - An unordered list is a list of items whose items are marked are not marked by any numbering system but by a simple bullet point.
  • Description list - Description list is a list of items with description or definition of each list item.

See out tutorial about HTML lists for more information.

Unstyled List Using Bootstrap

There are may cases where you need to present a list of item without any bullet marker. Using bootstrap you can do this just by adding .list-unstyled class to either <ul> or <ol>.


Output:

  • Align Left
  • Align Right
  • Align Center
    • Cut
    • Copy
    • Paste
  • Align Justify

Note: The .list-unstyled class remove style and left-padding of only list items which are its immidiate child. You have to add .list-unstyled class to every nested lists.


List Inline Bootstrap 4

By default list-items are block level element, means it cover full width of its parent. That's why list item aligns itself in vertical manner.

To create list items to align inline use bootstrap's .list-inline to <ol> or <ul>, and the .list-inline-item class to its <li> elements.

Output:

  • Align Left
  • Align Right
  • Align Center
  • Align Justify

points to remember Points to remember:
  1. To create unorderd list use .list-unordered on <ol> or on <ul> tag.
  2. To make list item inline use .list-inline on <ol> or on <ul> and add .list-inline-item on its <li> elements.
Bootstrap 4 Lists Group