Bootstrap Lists

Unordered list, ordered list and definition list are three types of lists. These lists can be styled using Bootstrap like placing them inline, grouping list items, applying contextual states for list items and so on.

Inline List Style

Placing list items inline is a necessity sometimes like displaying horizontal menu items. In those scenario Bootstrap inline list item style will come handy. Bootstrap class to be used is .list-inline on <ul> or <ol> tag elements. This class displays the list items in a single line and adds a default 5px padding on both sides of all the list items. A margin-left of -5px is added to offset the first list items left padding is also added.

Inline Bootstrap Style Example

<ul class="list-inline">
    <li>Crocodile</li>
    <li>Lion</li>
    <li>Shark</li>
    <li>Cobra</li>
</ul>

Example Output

Bootstrap Horizontal Definition Lists

Similar to unordered and ordered lists, definition lists can be displayed in horizontal style as shown in the example below.

Bootstrap Definition List Example

<dl class="dl-horizontal">
    <dt>Crocodile</dt>
    <dd>Crocodiles or true crocodiles are large aquatic reptiles that live throughout the tropics in Africa, Asia, the Americas and Australia.</dd>

    <dt>Lion</dt>
    <dd>The lion is one of the five big cats in the genus Panthera and a member of the family Felidae.</dd>

    <dt>Shark</dt>
    <dd>Sharks are a group of fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head.</dd>
</dl>

Example Output

Bootstrap List Group

List groups can be created and styled based on the list items. These can be useful for displaying menus. Following is an example of a basic bootstrap list group.

<ul class="list-group">
    <li class="list-group-item">Reptile</li>
    <li class="list-group-item">Vertebrate</li>
    <li class="list-group-item">Amphibians</li>
    <li class="list-group-item">Mammals</li>
    <li class="list-group-item">Birds</li>    
</ul>

Example Output

Bootstrap List Group Styles

Badges can be added to list group items and special styles 'active', 'disabled' and more can be added as shown below.

<ul class="list-group">
    <li class="list-group-item"><span class="badge">25</span>Reptile</li>
    <li class="list-group-item"><span class="badge">13</span>Vertebrate</li>
    <li class="list-group-item active"><span class="badge">45</span>Amphibians</li>
    <li class="list-group-item disabled"><span class="badge">21</span>Mammals</li>
    <li class="list-group-item list-group-item-success"><span class="badge">54</span>Birds</li>    
</ul>

Example Output

Remove List Style

.list-unstyled list style class can be remove list styles and make it look primitive. It removes the list-style-type and margins.

<ul class="list-unstyled">
    <li>Reptile</li>
    <li>Vertebrate</li>
    <li>Amphibians</li>
    <li>Birds</li>        
        <ul>
          <li>Peacock</li>
          <li>Bald Eagle</li>
        </ul>
    <li>Mammals</li>
</ul>

Example Output