Bootstrap 5 Typography Description list alignment
Last Updated :
14 Dec, 2022
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=
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>
<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=
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:
Bootstrap 5 Typography Description list alignment
Reference: https://getbootstrap.com/docs/5.0/content/typography/#description-list-alignment
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...