Bootstrap 5 Typography Description list alignment

Bootstrap 5 Typography Description list alignment is used to align terms and descriptions horizontally by using the grid system’s predefined classes.

We can optionally add a .text-truncate class to truncate the text with an ellipsis.

Typography Description list alignment Class:

text-truncate: This class is used to truncate the description.

Syntax:

<tag  class="col-sm-3 text-truncate">...</tag>

The below examples illustrate the Typography Description list alignment:

Example 1: 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:

Bootstrap 5 Typography Description list alignment

Example 2: In this example, we will apply the class to the first three HTML dl, you will see that the text "JS: JavaScript" length is sufficient for the "col-sm-3" class, so it will not truncate.

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">
        <dl class="col-sm-3 text-truncate">
            HTML: Hypertext Markup Language
        </dl>
        <dl class="col-sm-3 text-truncate">
            CSS: Cascading Style Sheet
        </dl>
        <dl class="col-sm-3 text-truncate">
            JS: JavaScript
        </dl>
        <dl class="col-sm-3">
          HTML, CSS and JavaScript is must 
          to land a job in Web Development Field.
        </dl>
    </dl>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/typography/#description-list-alignment

Bootstrap 5 Typography Description list alignment

Explore