Explain the types of lists supported by Bootstrap
Last Updated :
20 Dec, 2022
A list is a record of information that makes finding items easy using bullets.
There are 3 types of lists supported by Bootstrap are:
- Unordered Lists: In Unordered lists, items are marked with bullets.
- Ordered Lists: In Ordered lists items are marked with numerical bullets such as 1,2, i, ii, etc.
- Definition Lists: In Definition lists, items are defined with its description.
Let’s see the implementation of the above list.
Example 1: In this example, we will use Unordered lists. In Unordered lists items are marked with bullets. Unordered lists is created using <ul> tag and then items are listed using <li> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Bootstrap 4 Unstyled List</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<h2 class="mb-3">Unordered List</h2>
<ul>
<li>Chocolates</li>
<li>Biscuits</li>
<ul>
<li>Jim-Jam</li>
<li>Oreo</li>
</ul>
<li>Fruits</li>
<li>Gifts</li>
</ul>
</body>
</html>
|
Output:
Explanation: In above example, unordered list is created and items are marked with bullets. The items with small black circles(Disc bullets) are items of unordered list and items with circles are items of Biscuits. Hence, we can also create list in list.
Example 2: In this example, we will use Ordered lists. In Ordered lists items are marked with numerical bullets such as 1, 2, i, ii. Ordered lists is created using <ol> tag and list items are started with<li> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Bootstrap 4 Unstyled List</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<h2 class="mb-3">Ordered List</h2>
<ol>
<li>Chocolates</li>
<li>Biscuits</li>
<ol type="i">
<li>Jim-Jam</li>
<li>Oreo</li>
</ol>
<li>Fruits</li>
<li>Gifts</li>
</ol>
</body>
</html>
|
Output:
Explanation: In above example, ordered lists is created and items are marked with numerical bullets. The items marked with 1,2,3 are of ordered lists and items marked with I, ii are of Biscuits. Hence, we can list in list.
Example 3: In this example, we will use Definition list that is used to give specific description to list item. In Definition lists items are defined with its description. Definition lists is created using <dl> tag.
- <dt> tag which specifies description of list.
- <dd> tag which defines description details.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Bootstrap 4 Unstyled List</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<h2 class="mb-3">Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CN</dt>
<dd>Computer Network</dd>
<dt>DBMS</dt>
<dd>Database Management System</dd>
</dl>
</body>
</html>
|
Output:
Explanation: In above example, Definition list is created in which items are specified with its definition. Here, HTML is a item and HyperText Markup Language is its description.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...