BootStrap 5 Reboot Lists

Last Updated : 13 Jan, 2023

Bootstrap 5 Reboot Lists facilitates different kinds of lists, namely, unordered lists, ordered lists, & description lists, that remove the margin-top property & a margin-bottom property with a value of 1rem. The Nested lists don’t have margin-bottom property. Although, for <ul> and <ol> elements, the padding-left property can be reset. The description lists contain an updated margin property, in order to make simpler styling with a clear hierarchy, and better spacing. The margin-left property can be set to 0 & the margin-bottom property can be set to .5rem, in order to reset the description lists & by default, description lists are bolded.

BootStrap 5 Reboot Lists Class: There are no predefined classes for rebooting the list, Bootstrap will reboot the default impact of HTML list tags.

Syntax:

For Unordered List:

<ul>
    <li>...</li>
</ul>

For Ordered List:

<ol>
    <li>...</li>
</ol>

For Description List:

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Example 1: In this example, we have implemented an unordered and ordered list.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
  
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Reboot Lists</h2> 
        <strong> List of Fruits - Unordered</strong> 
        <ul> 
            <li>Banana</li> 
            <li>Apple</li> 
            <li>Orange</li> 
            <li>Grapes</li> 
            <li>Mango</li> 
        </ul> 
        <strong>List of Vegetables - Ordered</strong> 
        <ol> 
            <li>Potato</li> 
            <li>Tomato</li> 
            <li>Onion</li> 
            <li>Brinjal</li> 
            <li>Cauliflower</li> 
        </ol> 
    </div> 
  
</body> 
  
</html>

Output:

Example 2: In this example, we have implemented the description list.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> Bootstrap 5 Reboot Lists</h2> 
        <dl> 
            <dt> 
                Full Stack Development with 
                React & Node JS - Live: 
            </dt> 
            <dd> 
                Learn how to develop Single 
                Page Web Applications. 
            </dd> 
            <dt>System Design - Live:</dt> 
            <dd> 
                For individuals looking to 
                crack SDE job interviews. 
            </dd> 
            <dt>JAVA Backend Development - Live:</dt> 
            <dd>Learn backend development with Java</dd> 
            <dt>DSA Live for Working Professionals:</dt> 
            <dd> 
                A LIVE classroom program designed 
                for Working Professionals 
            </dd> 
        </dl> 
    </div> 
</body> 
  
</html>