< Bootstrap Tutorial

Bootstrap lists

← Previous Next →


Bootstrap Lists

We can define three different types of 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.
  • Ordered Lists - A list of items in which the order does explicitly matter. The list items in ordered lists are marked with numbers.
  • Definition Lists - A list of terms with their associated descriptions.

 Unstyled Ordered and Unordered Lists

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

The following code demonstrates how to do this:

<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 list created will look like this:

Placing Ordered and Unordered List Items Inline

If we want to create a horizontal menu using ordered or unordered list we need to place all list items in a single line i.e. side by side. We can do this by simply applying the Bootstrap's class .list-inline to the respective <ul> or <ol> elements. The .list-inline class also adds some left and right padding (5px by default) to the all list items.

The following code does the job:

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

The list created looks something like the following:

Creating Horizontal Definition Lists

The terms and descriptions in definition lists can also be placed side-by-side using the Bootstrap's class .dl-horizontal. The terms in horizontal definition lists will be truncated if is too long to fit in the left column (160px by default), however in narrower viewports they will change to the default stacked layout.

The following code demonstrates how to do this:

<dl class="dl-horizontal">
    <dt>User Agent</dt>
    <dd>An HTML user agent is any device that interprets HTML documents.</dd>
    <dt>Client-side Scripting</dt>
    <dd>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>Document Tree</dt>
    <dd>The tree of elements encoded in the source document.</dd>
</dl>

The output will look like this:

← Previous Next →