Lists With Bootstrap

Bootstrap 3 Tutorial � Bootstrap Lists

Types of HTML lists:

Unordered lists - unordered lists are marked with bullets
Ordered lists - marked with numbers, e.g. 1, ?, etc
Definition list - list of terms with their associated descriptions

Unstyled Ordered and Unordered Lists

Making Unstyled Ordered and Unordered Lists simply applying the class .list-unstyled to the respective <ul> or <ol> elements.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

  <h2>Bootstrap Basic List Group</h2>

  <h2 class="mb-3">Unstyled Unordered List</h2>

  <ul class="list-unstyled">

  <li>Home</li>

  <li>PC Items

  <ul>

  <li>Desktop PC</li>

  <li>Gamming PC</li>

  <li>Server</li>

  </ul>

  </li>

  <li>About Us</li>

  <li>Contact Us</li>

  </ul>

  <hr>

  <h2 class="mb-3">Unstyled Ordered List</h2>

  <ol class="list-unstyled">

  <li>Home</li>

  <li> PC Items

  <ol>

  <li>Desktop PC</li>

  <li>Gamming PC</li>

  <li>Server</li>

  </ol>

  </li>

  <li>About Us</li>

  <li>Contact Us</li>

  </ol>

  </div>
</body>

  </html>

Striped Rows

Create a basic list group using an <ul> element with class .list-group, and <li> elements with class .list-group-item:

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

<title>Bootstrap 3 - Basic List Group</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

  <h2>Bootstrap 3 - Basic List Group</h2>

  <ul class="list-group">

  <li class="list-group-item">First item description</li>

  <li class="list-group-item">Second item description</li>

  <li class="list-group-item">Third item description</li>

  </ul>

  </div>

Creating Horizontal Definition Lists - example

We use Bootstrap grid system's predefined classes to aligned horizontally side-by-side.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  .bs-example{

  margin: 20px;

  }

  </style>

  </head>

  <body>

  <div class="bs-example">

  <h2 class="mb-3">Horizontal Definition Lists</h2>

  <dl class="row">

  <dt class="col-sm-3">Short description 1</dt>

  <dd class="col-sm-9">My details - Large description 1 <br />

  The most basic list group is an .... list with list items

  </dd>

  <dt class="col-sm-3 text-truncate">Short description 2</dt>

  <dd class="col-sm-9">My details - Large description 2<br />

  The most basic list group is an .... list with list items

  </dd>

  <dt class="col-sm-3">Short description 3</dt>

  <dd class="col-sm-9">My details - Large description 3<br />

  The most basic list group is an .... list with list items

  </dd>

  </dl>

  </div>
</body>

  </html>

Active State - example

We use .active class to highlight the current item:

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Active Item Bootstrap in a List Group</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Active Item Bootstrap in a List Group</h2>

  <div class="list-group">

  <a href="#" class="list-group-item active"> Add your First item </a>

  <a href="#" class="list-group-item">Add your Second item</a>

  <a href="#" class="list-group-item">Add your Third item</a>

  </div>

  </div>

List with icons, images, bullets, without bullets, template, ordered, list ul

Bootstrap Lists with icons, images, bullets, without bullets, template, ordered, list ul
Lists With Bootstrap - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.