How to create a list with Bootstrap?


In the previous Bootstrap lesson Taimienphi.vn showed you how to create a table in Bootstrap, in the lesson below, Taimienphi.vn will guide you how to create lists using Bootstrap to understand this trick.


The following article will guide you how to create a list with Bootstrap Taimienphi.vn. Also readers can refer to some other Bootstrap lessons already on Taimienphi.vn to learn how to create Fixed Layout (fixed layout) with Bootstrap offline.

Instructions for creating lists using Bootstrap

1. Create lists using Bootstrap

We can create 3 different types of HTML lists, including:

– List type is not sorted (Unordered list): is the type of list in which the items are not in clear order. Items in an unordered list are not marked with icons.

– Sorted list type (Ordered list): is the list type in which the items are arranged in order and marked with numbers, such as 1, 2, 3, ….

– List of description type (Definition list): is a type of list which includes related descriptive terms.

2. The list type is not sorted

Sometimes in some cases we have to remove the default style of the list items. To do this, we just need to apply the class .list-unstyled for the element ul or ol corresponding.

For example: In the example below we create an unordered list type:

I created the bootstrap state list

The result will look like this:

I create the bootstrap list 2

Note: Class .list-unstyled removes the default list style and the left padding from list items that are children of the element ul or ol.

3. Put the categories in a sorted and unordered list in one line

If we want to create a horizontal menu using sort and unorganized list styles, we just need to put all the categories in one line. To do this just apply the class .list-inline for the element ul or ol and class .list-inline-item for the element li.

For example: In the example below we create a horizontal menu by placing categories in a sorted and unordered list:

I created the bootstrap state list 3

The result will look like this:

I create the bootstrap state list 4

4. Create a descriptive list style using Bootstrap

We can also align the terms and descriptions in the horizontal description list using predefined classes in the grid system in Bootstrap.

For example: In the following example we are going to create a list of styles that describe horizontally aligned:

I created the bootstrap state list 5

The result will look like this:

I created the bootstrap state list 6

Note: For longer term definitions, we can apply the class .text-truncate on the element DT to truncate the text, replace it with 3 dots (…).

The above lesson Taimienphi.vn has shown you how to create lists using Bootstrap. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

https://thuthuat.taimienphi.vn/tao-danh-sach-bang-bootstrap-51111n.aspx
In the next lesson, Taimienphi.vn will introduce you further List Group in Bootstrap.

.

Add a Comment

Your email address will not be published. Required fields are marked *