Buzz
This article will guide you on how to create lists with Bootstrap. Additionally, readers can refer to other Bootstrap tutorials available on Mytour to learn about creating Fixed Layouts with Bootstrap.
Guide on Creating Lists with Bootstrap
1. Creating Lists with Bootstrap
We can create 3 different types of HTML lists, including:
- Unordered List Type: This type of list contains items that are not in a clear order. Items in an unordered list are not marked with any symbols.
- Ordered List Type: This type of list has items arranged in a specific order and marked with numbers, such as 1, 2, 3, ....
- Description List Type: This list type includes terms with related descriptions.
2. Unordered List Type
Sometimes, in certain cases, we need to remove the default styling of list items. To achieve this, we simply apply the .list-unstyled class to the ul or ol elements accordingly.
Example: In the example below, we create an unordered list type:
The returned result appears as follows:
Note: The .list-unstyled class removes the default list style and left padding from list items that are children of the ul or ol element.
3. Placing Ordered and Unordered Lists in a Single Line
If you want to create a horizontal menu using both ordered and unordered list types, simply place all items in a single line. To achieve this, apply the .list-inline class to the ul or ol elements and the .list-inline-item class to the li elements.
Example: In the example below, we create a horizontal menu by placing ordered and unordered list items in a single line:
The returned result appears as follows:
4. Creating Description Lists with Bootstrap
Additionally, we can align terms and descriptions in description lists horizontally by using predefined classes in the Bootstrap grid system.
Example: In the following example, we'll create a description list aligned horizontally:
The returned result appears as follows:
Note: For longer term definitions, we can apply the .text-truncate class to the dt element to truncate text, replacing it with ellipses (...).
This tutorial from Mytour has just guided you on how to create lists with Bootstrap. Additionally, if you have any questions or queries, readers can leave their comments below the article.
In the next lesson, Mytour will introduce you to List Group in Bootstrap.
