Bootstrap Lists - Orderd Lists, Unordered Lists, Definition Lists

Bootstrap Tutorial

Bootstrap Lists

Bootstrap supports 3 types of lists ordered lists, unordered lists, and definition lists.

Orderd Lists : The ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.

Unordered Lists : The unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets.

Definition Lists : The each definition list item can consist of the <dt> and the <dd> elements. <dt> stands for definition term, and like a dictionar, The definition lists can also be placed side-by-side using the Bootstrap's class .dl-horizontal. The terms in horizontal definition lists will be truncated if is too long to fit in the left column (160px by default), however in narrower viewports they will change to the default stacked layout.

Example Program :

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Lists</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<h4>Ordered List Example :</h4>
<ol>
   <li>Ordered List 1</li>
   <li>Ordered List 2</li>
   <li>Ordered List 3</li>
</ol>
 
<h4>UnOrdered Lists Example :</h4>
<ul>
   <li>UnOrdered List 1</li>
   <li>UnOrdered List 2</li>
   <li>UnOrdered List 3</li>
</ul>
 
<h4>Unstyled List Example :</h4>
<ul class = "list-unstyled">
   <li>Unstyled List 1</li>
   <li>Unstyled List 2</li>
   <li>Unstyled List 3</li>
</ul>
 
<h4>Inline List Example :</h4>
<ul class = "list-inline">
   <li>Inline List 1</li>
   <li>Inline List 2</li>
   <li>Inline List 3</li>
   <li>Inline List 4</li>
</ul>
 
<h4>Definition List Example :</h4>
<dl>
   <dt>Description 1</dt>
   <dd>Definition List 1</dd>
   <dt>Description 2</dt>
   <dd>Definition List 2</dd>
</dl>
 
<h4> Horizontal Definition List Example</h4>
<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>This Is Sample Horizontal Definition List 1</dd>
   <dt>Description 2</dt>
   <dd>This Is Sample Horizontal Definition List 2</dd>
</dl>
 
</body>
</html>

Output :

Ordered List Example :

Ordered List 1
Ordered List 2
Ordered List 3

UnOrdered Lists Example :

UnOrdered List 1
UnOrdered List 2
UnOrdered List 3

Unstyled List Example :

Unstyled List 1
Unstyled List 2
Unstyled List 3

Inline List Example :

Inline List 1
Inline List 2
Inline List 3
Inline List 4

Definition List Example :

Description 1: Definition List 1
Description 2: Definition List 2

Horizontal Definition List Example

Description 1: This Is Sample Horizontal Definition List 1
Description 2: This Is Sample Horizontal Definition List 2

Bootstrap Tutorial

WEB DEVELOPMENT TUTORIALS

S/W RELATED LINKS