Bootstrap Lists

In bootstrap, we have a different type of classes such as .list-unstyled, .list-inline, etc. to style HTML lists. In HTML, we can create three different types of lists such as ordered, unordered, and description lists.

 

By using bootstrap classes, we can change the default style of lists (ordered, unordered, and description) based on our requirements.

Bootstrap Unstyled Lists

By using bootstrap .list-unstyled class, we can remove the default list-style and left margin on list items. The bootstrap .list-unstyled class can remove the default list-style and left margin only from the list items which are immediate children of the ordered (<ol>) and unordered (<ul>) list items. So, in case, if you want to remove the default style of nested lists, then you need to add .list-unstyled class on nested lists also.

 

Following is the example of removing the default list-style from ordered and unordered list items in bootstrap.

 

Live Preview

<ul class="list-unstyled">

   <li>Home</li>

   <li>Tutorials

        <ul>

            <li>Database</li>

            <li>Server Side</li>

            <li>Client Side</li>

            <li>Mobile</li>

        </ul>

   </li>

   <li>Examples</li>

   <li>Articles</li>

   <li>Tools</li>

   <li>News</li>

   <li>About Us</li>

</ul>

If you observe the above example, we applied .list-unstyled class on unordered list to remove the default list-style of immediate child list items.

 

The above example will return the result like as shown below.

 Bootstrap unstyled list example result

 

If you observe the above result the .list-unstyled class has removed the default list-style of immediate child list items, the nested list still having default style because we didn’t apply .list-unstyled class on it.

Bootstrap Place List Items Inline

In bootstrap, by using list inline classes (.list-inline, .list-inline-item) we can remove the list’s bullets and show the list items in the same line with some light margin.

 

<ul class="list-inline">

   <li class="list-inline-item">Bootstrap</li>

   <li class="list-inline-item">CSS</li>

   <li class="list-inline-item">JavaScript</li>

</ul>

The above example will return the result like as shown below.

 

Bootstrap   CSS   JavaScript

The above example will return the result like as shown below.

Bootstrap Horizontal Description Lists

By default, the HTML description lists will show the item terms with bold text and description text below of it like as shown below.

 

Bootstrap description lists example result

 

In bootstrap, we can align HTML description list items (terms, and description) horizontally (side-by-side) by using grid system’s predefined classes like as shown below.

 

Live Preview

<div class="container">

    <dl class="row">

        <dt class="col-sm-3">Tutorials</dt>

        <dd class="col-sm-9">List of Tutorials.</dd>

        <dt class="col-sm-3">Articles</dt>

        <dd class="col-sm-9">List of Articles.</dd>

        <dt class="col-sm-3">Tools</dt>

        <dd class="col-sm-9">Online tools to execute the code online.</dd>

        <dt class="col-sm-3 text-truncate">Server Side Coding Info</dt>

        <dd class="col-sm-9">Server side coding will help to communicate with UI and databases.</dd>

    </dl>

</div>

If you observe the above example, we used grid system predefined classes to show the description list items horizontally. Here, we used .text-truncate class to truncate the longer text with an ellipsis and it’s an optional.

 

The above example will return the result like as shown below.

 

Bootstrap horizontal description lists example result

 

This is how we can show the description list details horizontally by using grid system predefined classes based on our requirements.

 
 

NEXT

Bootstrap Code  
 

Topics Covered