Bootstrap 5 Typography Lists

Bootstrap 5 Typography Lists has three types of classes that can be used on the list. A list is an important component in the development and we need this list of classes to design or represent that in our own way.

Typography Lists:

Unstyled: Unstyled is used to remove the default style from the order or under the list. It also removes the left margin of the list.
Inline: It is used to remove a list’s bullets and applies some light margin.
Description list alignment: It is used to align terms and descriptions horizontally by using the grid system’s predefined classes

The below example will illustrate the Bootstrap 5 Typography Lists.

Example 1: In this example, we will create 2 order lists, and use a list-unstyled class on one of them.

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>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ol>
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
    <!-- Bootstrap 5 Unstyled Class Used-->
    <strong>Bootstrap 5 Unstyled Class Used</strong>
    <ol class="list-unstyled">
        <li class="">We are Geeks</li>
        <li class="">We help each other</li>
        <li class="">We love Stackoverflow</li>
    </ol>
</body>

</html>

Output:

Example 2: In this example, we will use these classes on the unordered 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>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <ul class="list-inline">
        <li class="list-inline-item">We are Geeks</li>
        <li class="list-inline-item">We help each other</li>
        <li class="list-inline-item">We love Stackoverflow</li>
    </ul>
</body>

</html>

Output:

Example 3: In this example, we will apply the class on the third HTML dt tag element.

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">
    <style>
        body{
            margin-left:10px;
            margin-right:10px;
        }
    </style>
</head>

<body>
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">Geeks Learning Together</p>
    <dl class="row">
        <dt class="col-sm-3">HTML</dt>
        <dd class="col-sm-9">
            HTML stands for HyperText Markup Language.
            It is used to design web pages using the markup
            language. HTML is the combination of Hypertext
            and Markup language.
        </dd>

        <dt class="col-sm-3">CSS</dt>
        <dd class="col-sm-9">
            <p>Cascading Style Sheet</p>
            <p></p>
        </dd>
        <!-- Bootstrap Description list alignment class used -->
        <dt class="col-sm-3 text-truncate">
            Bootstrap 3 & Bootstrap 4
        </dt>
        <dd class="col-sm-6">
            It is the most popular HTML, CSS, and JavaScript
            framework for developing responsive, mobile-first websites.
        </dd>
        <dd class="col-sm-3">
            Framework
        </dd>
        <dt class="col-sm-3">Bootstrap 5</dt>
        <dd class="col-sm-6">
            Bootstrap is a free and open-source tool collection
        </dd>
        <dd class="col-sm-3">
            Framework
        </dd>
    </dl>
</body>
</html>

Output:

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

Bootstrap 5 Typography Lists

Explore