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...