Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is Lead Body Copy ?

  • Last Updated : 07 Oct, 2021

Bootstrap is a quicker development process of responsive websites by using pre-written classes. It also makes websites Responsive and adds styles. One such feature is Lead Body Copy. Lead Body Copy is used to add emphasis to a paragraph in a body tag. The paragraph tags are inside the Body tags. This gives us lightweight, large font size and a tall line-height. This feature can be used using the pre-defined class “.lead” and see its functionality.

Let’s understand Lead Body Copy with the below step by step implementation. 

Step1:  Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>

Step 2: Add Internal CSS using <style> tag inside <head> tag.



Step 3: Use .lead: :first-letter Selector in <style> tag to add a style to the first letter of the specified selector .

Step 4: Add <div> tag in the HTML body with class container.

Step 5:  Add <p> tag in the HTML bode with .lead class.

Example: The following example shows usage of .lead class with some additional styles.

HTML




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <head>
        <title>Bootstrap lead body copy example</title>
        <link rel="stylesheet" href=
        <style media="screen">
            .lead {
                color: blue;
            }
  
            .lead::first-line {
                font-size: 150%;
                background-color: yellow;
                color: green;
            }
        </style>
    </head>
  
<body>
    <div class="container">
        <div class="col-md-12">
            <h1><b>
                    <span style="color:green">
                        Geeks
                    </span>For
                    <span style="color:green"
                        Geeks 
                    </span>
                </b>
            </h1>
            <p class="lead">
                Web development refers to the building, 
                creating, and maintaining of websites. 
                It includes aspects such as web design,
                web publishing, web programming, and 
                database management.It is the creation 
                of an application that works over the
                internet i.e. websites.
            </p>
  
            <hr style="height: 2px; border-width: 0;
                color: gray; background-color:gray">
            <p style="color:green">
                Web development refers to the building, 
                creating, and maintaining of websites. 
                It includes aspects such as web design,
                web publishing, web programming, and 
                database management.It is the creation 
                of an application that works over the
                internet i.e. websites.
            </p>
  
            <hr style="height: 2px; border-width: 0;
                color:gray; background-color:gray">
        </div>
    </div>
</body>
  
</html>

Output:

.lead class with some additional styles




My Personal Notes arrow_drop_up
Recommended Articles
Page :