Bootstrap Lists

Creating Lists With Bootstrap

You can create three different types of HTML lists:

• Unordered lists — A list of items in which the order does not explicitly matter. The list items in unordered lists are marked with bullets, e.g. ⚬, ●, etc.
• Ordered lists — A list of items in which the order does explicitly matter. The list items in ordered lists are marked with numbers, e.g. 1, ⅵ, etc.
• Definition list — A list of terms with their associated descriptions.

See the tutorial on HTML lists, to learn more about the different lists types.

---

Unstyled Ordered and Unordered Lists

Sometimes you might need to remove the default styling form the list items. You can do this by simply applying the class .list-unstyled to the respective <ul> or <ol> elements.

Example

<ul class="list-unstyled">
    <li>Home</li>
    <li>Products
        <ul>
            <li>Gadgets</li>
            <li>Accessories</li>
        </ul>
    </li>
    <li>About Us</li>
    <li>Contact</li>
</ul>

— The output of the above example will look something like this:

Note: The .list-unstyled class removes the default list-style and left padding only from the list items which are immediate children of the <ul> or <ol> element.

---

Placing Ordered and Unordered List Items Inline

If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class .list-inline to the <ul> or <ol>, and the class .list-inline-item to the child <li> elements.

Example

<ul class="list-inline">
    <li class="list-inline-item">Home</li>
    <li class="list-inline-item">Products</li>
    <li class="list-inline-item">About Us</li>
    <li class="list-inline-item">Contact</li>
</ul>

— The output of the above example will look something like this:

---

Creating Horizontal Definition Lists

The terms and descriptions in a definition list can also be aligned horizontally side-by-side using the Bootstrap grid system’s predefined classes. Here’s an example:

Example

<dl class="row">
    <dt class="col-sm-3">User Agent</dt>
    <dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
    <dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
    <dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
    <dt class="col-sm-3">Document Tree</dt>
    <dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>

— The output of the above example will look something like this: