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= 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= 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
Please Login to comment...