Related post

Inheritance in Java programming with example | Zhullyblog

How to create a list with Bootstrap - Zhullyblog

Bootstrap List


A list is an enumeration of things or item . A list can be used to enumerate and as well describe items. You can have list of things and also give description. There are three different types of list which are :

 • Ordered list
  • Unordered list
  • Definition list
Although in the HTML list I posted a while, we made mention of 4 types of list. Click here to see the tutorial.

Ordered list
Ordered list are list that have ordered form. This means that the items present in the list have an order.

Unordered list
They are list of items that the orders do not matter. Unlike the ordered list that starts with either numbers or numerals, Unordered list have bullets.

Definition list
They are list of items followed by the item details or description. They are used to list items and give more details about the item listed.

Unstyled ordered and Unordered list


To create an unstyled ordered or Unordered list, you use the .list-unstyled method.
Take a look at the two examples given below.



Ordered list


Bootstrap ordered list





<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Ordered list</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>Unstyled Ordered List</h2>
  <ol class="list-unstyled">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
    <li>Contact</li>
  </ol>
  <script src="bootstrap/js/jquery.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>



Unordered list



Bootstrap unordered list





<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Example of Bootstrap 3 Unstyled Lists</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>

<body>

  <h2>Unstyled Unordered List</h2>
  <ul class="list-unstyled">
    <li>Home</li>
    <li>Products  </li>
    <li>About Us</li>
    <li>Contact</li>
  </ul>
  <script src="bootstrap/js/jquery.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
</body>

</html>







Please share

Comments