Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. In this article we use some built-in Twitter Bootstrap CSS to make an attractive list. A Twitter bootstrap list can be styled and well designed. You can style your list by just adding some classes to your list and it’ll look nice.
Using Twitter Bootstrap, you may create static navbar. - See more at: http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf
What Bootstrap is
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up (bootstrap) their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.
To read more see Bootstrap.
Include with HTML
Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like the following:
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.
Creating Simple HTML List
The following code defines the simple table using table, tr and td tags. The HTML file looks as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li>Home</li>
<li>Technologies
<ul>
<li>Article</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</body>
</html>
The HTML will render without Bootstrap as in the following:
Creating Lists With Twitter Bootstrap
To make the list more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class.
- list-unstyled
- list-inline
- List Groups
1. Using bootstrap CSS class="list-unstyled"
Now first we use the ist-unstyled clsss with ul tag to remove the default styling form the list items. Now open the bootstrap.css file and find the list-unstyled class.
The HTML file looks such as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="list-unstyled">
<li>Home</li>
<li>Technologies
<li>About Us</li>
<li>Contact</li>
</ul>
</body>
</html>
The HTML will render without Bootstrap as in the following:
![list-unstyled Class]()
2. Using bootstrap CSS class="list-inline"
If you want to create a horizontal menu using an ordered or unordered list then you need to place all list items in a single line, in other words side by side. You can do this by simply applying the Bootstrap's class .list-inline.
The HTML file looks as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="list-inline">
<li>Home</li>
<li>Technologies
<ul>
<li>Article</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</body>
</html>
The HTML will render without Bootstrap as in the following:
![list-inline Class]()
3. Using bootstrap CSS class="List Groups"
The list groups class is used to display lists of items in a beautiful manner. To do that you can use a list-group-item class with every item.
The HTML file looks as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="List Groups">
<li class="list-group-item">Home</li>
<li class="list-group-item">Technologies
<li class="list-group-item">About Us</li>
<li class="list-group-item">Contact</li>
</ul>
</body>
</html>
The HTML will render without Bootstrap as in the following:
![List Groups Class]()