Bootstrap 5 Typography Lead

Last Updated : 7 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>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/content/typography/#lead

Comment

Explore