Open In App

What is Lead Body Copy ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 body 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



Last Updated : 28 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads