BootStrap 5 Reboot Lists

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>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#lists

BootStrap 5 Reboot Lists

Explore