Bootstrap gives the predefined CSS to make us use of them to get high level of attraction in web designs.
Introduction
So far we have seen that, how to create different types of tables using Bootstrap
here. Now lets see how to do listing styles using Bootstrap.
Objective
The main objective of this chapter is to learn the listing styles and make use of predefined Glyphicons in Bootstrap.
Using the code
For simple un-ordered list, try the below code.
<ul class="list-unstyled">
<li>Home</li>
<li>
Training
<ul>
<li>Online Training</li>
<li>Offline Training</li>
</ul>
</li>
<li>Placement</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>You will see the following output in your browser,
Now, change the class .list-unstyled as .list-inline like below,
<ul class="list-inline">
<li>Home</li>
<li>Training</li>
<li>Placement</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>Now you will see your items in line in your browser.
Creating Definition lists using Bootstrap
To Create Definition lists, we have to use 'dl' tag in Html.
<dl class="dl-horizontal">
<dt>DotNetFunda</dt>
<dd>Dotnetfunda is the tutorials website to learn the fundementals of .Net.</dd>
<dt>ItFunda</dt>
<dd>Itfunda is for .Net training and placement. We can buy e-books, materials of microsoft technologies in ItFunda. </dd>
<dt>KidsFunda</dt>
<dd>This is designed for learning fundamentals to kids.</dd>
</dl>The above example shows a definition lists in your browser like below.
List Grouping using Bootstrap
There are some predefined grouping classes in bootstrap.css. See the below example,
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">Favourites</li>
<li class="list-group-item">My Cloud</li>
<li class="list-group-item">Network</li>
<li class="list-group-item">Messages</li>
<li class="list-group-item">Settings</li>
</ul>list-group &
list-group-item are the classes in
bootstrap.css. These predefined classes makes the list as below.
List Grouping with Predefined Glyphicons
bootstrap.css comes with so many Glyphicons. Lets make use of them.
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-home"></span> Home <span class="badge">512</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span> Favourites <span class="badge">45</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-cloud"></span> My Cloud <span class="badge">9</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-signal"></span> Network <span class="badge">8</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-star"></span> Important <span class="badge">32</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-envelope"></span> Messages <span class="badge">16</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-globe"></span> Notifications <span class="badge">58</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-time"></span> Reminders <span class="badge">7</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-pencil"></span> Drawings <span class="badge">6</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Files <span class="badge">102</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-camera"></span> Photos <span class="badge">55</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">266</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">84</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-trash"></span> Trash <span class="badge">1</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-cog"></span> Settings <span class="badge"></span>
</a>
</div>In the above code if you observe, there are so many class names such as home, heart, cloud, signal, star, envelope etc. These are the classes for their respective icons in Bootstrap.
Now, the output of the above list will be,
The Icons you see in the browser are the predefined icons in Bootstrap. Not only these icons available in Bootstrap. Open the bootstrap.css and press ctrl+f and type 'Glyphicon' and see the all Glyphicons of Twitter Bootstrap.
'badge' class is used to design the background of numbers on the left side which is also predifined Bootstrap CSS.
Conclusion
In this article we have looked into creating beautiful lists in a simple way using Twitter Bootstrap. Hope you understand. If you have any Questions, please ask in the below comment box (feel free).
Thanks for reading,