0
0
Bootsrapmarkup~5 mins

Lead paragraphs in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Lead paragraphs help make important text stand out by making it bigger and lighter. This guides readers to key information easily.

You want to highlight the introduction of an article or blog post.
You want to make a summary or important note clear at the start of a page.
You want to improve readability by separating main ideas from details.
You want to create a friendly and inviting look for your text.
You want to keep your page visually balanced with clear text hierarchy.
Syntax
Bootsrap
<p class="lead">Your important paragraph text here.</p>

The lead class makes the paragraph text larger and lighter in color.

Use it only for key paragraphs, not for all text, to keep emphasis clear.

Examples
This paragraph uses the lead class to appear bigger and lighter.
Bootsrap
<p class="lead">This is a lead paragraph that stands out.</p>
Normal paragraphs look smaller and darker compared to lead paragraphs.
Bootsrap
<p>This is a normal paragraph without special styling.</p>
Use lead paragraphs to introduce sections, then normal paragraphs for details.
Bootsrap
<p class="lead">Lead paragraph at the start of a section.</p>
<p>Followed by normal paragraphs with details.</p>
Sample Program

This example shows a lead paragraph at the start of the content. It is bigger and lighter, making it easy to spot. The following paragraphs use normal styling for details.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Lead Paragraph Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-5">
    <h1>Welcome to Our Website</h1>
    <p class="lead">This is a lead paragraph that introduces the main idea clearly and stands out from the rest of the text.</p>
    <p>This paragraph contains more detailed information that supports the lead paragraph above. It uses normal text styling.</p>
    <p>Another normal paragraph to show the difference in style and importance.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

The lead class increases font size and lightens the text color for emphasis.

It is best used for one or two paragraphs to keep the page balanced and readable.

Remember to include the Bootstrap CSS link for the lead class to work.

Summary

Use class="lead" on paragraphs to highlight important text.

Lead paragraphs are bigger and lighter to catch the reader's eye.

Use them sparingly to keep your page clear and easy to read.