In order to do so, first it is important to understand the method of creating a list with Bootstrap.
Majorly, three kinds of lists could be created with Bootstrap as follows-
Apart from these three widely used lists there are a number of Html lists that are used by coder to list items.
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.
<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>
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.
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.
<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>
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.
<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>
A number of Html elements can be added to your lists.
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.