Working with Lists in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 3789 red flag
Rating: 4 out of 5  
 1 vote(s)

Bootstrap gives the predefined CSS to make us use of them to get high level of attraction in web designs.
Recommendation
Read Working with Tables in Bootstrap before this article.

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,

Recommendation
Read Glyphicons in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Gurumatrix2004 on: 7/18/2014 | Points: 25
Superb
Posted by: Goud.Kv on: 7/18/2014 | Points: 25
Thanks..

Login to post response

Comment using Facebook(Author doesn't get notification)