Articles → BOOTSTRAP → Dl-Horizontal Class In Bootstrap

Dl-Horizontal Class In Bootstrap

In this article, we will discuss dl-horizontal class in Bootstrap.

Purpose

The dl-horizontal class aligns the terms and definition of the HTML description list side by side.

Example

Consider the following code

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <dl class="dl-horizontal">
         <dt>Yello Pulse</dt>
         <dd>
            Fresh yellow pulse boiled and added spices for taste
         </dd>
         <dt>Pizza </dt>
         <dd>
            Freshly baked base with fresh vegetables.
         </dd>
      </dl>
   </body>
</html>

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Monday, September 6, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**