Bootstrap 5 Typography Lead

Last Updated : 07 Dec, 2022

Bootstrap 5 Typography Lead is used to make a paragraph get differentiated from the rest of the paragraphs by changing its look.

Bootstrap 5 Typography Lead Used Classes:

lead: This class is used to make a paragraph look different from the rest of the paragraphs.

Syntax:

<p class="lead">
 ...
</p>

Example 1: In this example, we will learn about Typography Lead by using the class lead on the p tag.

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"> 
<title>Typography Lead</title> 
</head> 
  
<body> 
    <div class="container text-center col-8"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Typography Lead</h2> 
  
        <p class="lead">  
            Typography is a feature of Bootstrap for 
             styling and formatting text content.  
        </p> 
        <p> 
            It is used to create customized headings,  
            inline subheadings, lists, and paragraphs, 
            align, add more design-oriented font styles, 
            and much more. Bootstrap support global 
            settings for the font stack, Headings and Link  
            styles to be used in the web app for every type 
            of OS and Device to deliver the best user interface. 
        </p> 
  </div> 
</body> 
</html>

Output:

Example 2: In this example, we will see how can we transform typography lead to uppercase and do some styling.

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"> 
<title>Typography Lead</title> 
</head> 
  
<body> 
    <div class="container text-center col-8"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Typography Lead</h2> 
  
         
        <p class="lead text-danger text-uppercase">  
            Typography is a feature of Bootstrap  
            for styling and formatting text content.  
        </p> 
        <p> 
            It is used to create customized headings, inline 
            subheadings, lists, and paragraphs, align, add  
            more design-oriented font styles, and much more. 
            Bootstrap support global settings for the font  
            stack, Headings and Link styles to be used in the  
            web app for every type of OS and Device to deliver  
            the best user interface. 
        </p> 
    </div> 
</body> 
</html>