In this tutorial we will learn how to add styles to different types of lists with Bootstrap.
We can define the three different types of lists:
A list of terms with their associated descriptions.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- ww w . j ava 2s .c om-->
<body style='margin:20px;'>
<dl>
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>
Make terms and descriptions in <dl>
line
up side-by-side. Starts off stacked like default <dl>
s,
but when the navbar expands, so do these.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w ww . j a v a 2s .c om-->
<body style='margin:20px;'>
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>Web page mark up language.</dd>
</dl>
</body>
</html>
A list of items in which the order does explicitly matter.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w w . j a v a2 s .c om-->
<body style='margin:20px;'>
<ol>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ol>
</body>
</html>
To remove the default styling form the list items, apply the class .list-unstyled
to the <ul> or <ol> elements.
.list-unstyled
class removes the
default list-style and left padding only from the list items which are immediate
children of the <ul> or <ol> element.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{<!-- w w w . j av a 2 s . com-->
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h2>Unstyled Unordered List</h2>
<ul class="list-unstyled">
<li>CSS</li>
<li>Web
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</li>
<li>SQL</li>
<li>Java</li>
</ul>
<hr>
<h2>Unstyled Ordered List</h2>
<ol class="list-unstyled">
<li>Javascript</li>
<li>Oracle
<ol>
<li>Pl/SQL</li>
<li>Server</li>
</ol>
</li>
<li>Client</li>
<li>Message</li>
</ol>
</div>
</body>
</html>
A list of items in which the order does not explicitly matter.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from ww w . jav a2 s . c om-->
<body style='margin:20px;'>
<ul>
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w w . ja v a2 s .com-->
<body style='margin:20px;'>
<ul class="list-unstyled">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>
Place all list items on a single line with inline-block and some light padding.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from ww w . j a va 2 s. c o m-->
<body style='margin:20px;'>
<ul class="list-inline">
<li>Java</li>
<li>CSS</li>
<li>HTML</li>
<li>Bootstrap</li>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</body>
</html>