Bootstrap Tutorial - Bootstrap List

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:

Unordered lists - A list of items whose orders do not matter. The list items in unordered lists are marked with bullets.
Ordered lists - A list of items whose orders do matter. The list items in ordered lists are marked with numbers.
Definition list - A list of terms with their associated descriptions.

Definition List

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>

Click to view the demo

Horizontal definition list

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>

Click to view the demo

Ordered Lists

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>

Click to view the demo

To remove the default styling form the list items, apply the class .list-unstyled to the <ul> or <ol> elements.

Example

.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>

Click to view the demo

Unordered Lists

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>

Click to view the demo

Unstyled List

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>

Click to view the demo

Inline List

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>

Click to view the demo