Bootstrap Lists

Bootstrap is the world's one of the most popular and responsive framework for developing web pages and web applications. It is completely free to download and it is based on Html, CSS and JavaScript framework. The latest version of Bootstrap after Bootstrap 2.x is Bootstrap 3. The method of applying styles to different types of lists with Bootstrap is easy.

In order to do so, first it is important to understand the method of creating a list with Bootstrap.

Creating Lists With Bootstrap

Majorly, three kinds of lists could be created with Bootstrap as follows-

  1. Ordered lists-In there types of lists, Order matters while creating the list. The items are marked with numbers.
  2. Unordered lists- In these types of lists, Order of the items under the list does not matter. Therefore items are unordered and are mostly marked with the help of bullets.
  3. Definition list- In this type of list various terms are described accordingly. Definition lists allow the coders to add significant amount of descriptive information along with the list items.

Apart from these three widely used lists there are a number of Html lists that are used by coder to list items.

Unstyled Format(Ordered and Unordered lists)

At times we need to create simple and unstyled lists. In these cases the default styling needs to be removed from the list items. This could be easily done by applying the class .list-unstyled to the respective <ul> or <ol> elements. This class generates simple looking outputs in which the list is unstyled. It should be noted that the class .list-unstyled removes the default class list-style and the left padding only from those list items that are placed as the immediate children of the <ul> or <ol> elements. Unstyled lists are simple and do not imply the application of a specific style for marking the list items. They are not fancy as the list groups.

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> 
 

Output :

Cinque Terre

Inline Format(Ordered and Unordered lists)

Placing ordered and unordered list items in line is also simple. If you want to create a list that displays elements in a line or if you need a horizontal menu in an ordered or unordered list, you need to place all items of the list in a single line, next to one another side by side. Inline format is mostly used along with the Unordered Lists.

A sample output that could be generated is displayed below as:

This type of format can be obtained 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 which is 5px by default, to the all list items.

Creating Horizontal Definition Lists

Another design for lists is the Horizontal Definition Format in which we can obtain the description of individual terms placed alongside their headings. This is done in definition lists. This format is produced with the help of Bootstrap's class .dl-horizontal.

The terms in the list are truncated if is too long to fit in the left column that is160px by default, however in narrower viewports they will be changed to the default stacked layout.

Horizontal definition lists are used widely on tutorial websites and a number of blogs and other web pages as well.

Bootstrap List Groups

Example


   <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 client-side i.e. by the user's web browser.</dd> 
    <dt> Document Tree</dt> 
    <dd> The tree of elements encoded in the source document.</dd> 
</dl> 

 

Output :

Cinque Terre

List groups in Bootstrap look very attractive and class. The list items displayed in list groups are further hyperlinked with group items. The Bootstrap class used for this purpose is .list-group

If you want to make your list groups even more attractive and customised, you can also add icons and badges to this list group to make it more elegant. The badges component will automatically be positioned on the right.

The simplest form of a list group is an unordered list with its list items and proper classes.

It is also possible to give your list a format of Headings and Paragraphs. Headings and paragraphs allow the coder to add required amount of information to the web pages.

Example


   <div class="list-group"> 
    <a href="#" class="list-group-item active"> 
        <span class="glyphicon glyphicon-camera"> </span>  Pictures <span class="badge"> 25</span> 
    </a> 
    <a href="#" class="list-group-item"> 
        <span class="glyphicon glyphicon-file"> </span>  Documents <span class="badge"> 145</span> 
    </a> 
    <a href="#" class="list-group-item"> 
        <span class="glyphicon glyphicon-music"> </span>  Music <span class="badge"> 50</span> 
    </a> 
    <a href="#" class="list-group-item"> 
        <span class="glyphicon glyphicon-film"> </span>  Videos <span class="badge"> 8</span> 
    </a> 
</div> 
 

Output :

Cinque Terre

A number of Html elements can be added to your lists.

List Groups with Contextual States

If there is a need to apply extra emphasis on certain items in a list, one can use the contextual classes on the list group items. Similarly, you can use these contextual classes to the linked list group items. You can also use the class .active to specify the active list group item.

This format is mostly used by coders to display certain contextual messages which need to be displayed distinguished from other messages.