Basic Typography: Headings, Paragraphs, and Lists in Bootstrap 4

Introduction to Basic Typography in Bootstrap 4

Bootstrap 4 provides a set of classes and styles to handle typography in a consistent and responsive manner. Below are some key features and examples to illustrate the usage of basic typography in Bootstrap 4.

Headings in Bootstrap 4

Standard HTML Headings

Bootstrap provides styles for all HTML headings (<h1> through <h6>). Each heading has a default size and margin.

<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

Display Headings in Bootstrap 4

For larger headings, Bootstrap offers display classes (display-1 to display-4).

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Inline Text Elements

Bootstrap provides various classes to style inline text elements:

Bold text: <strong> or .font-weight-bold
Italic text: <em> or .font-italic
Small text: <small> or .text-small

<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italic</em> text.</p>
<p>This is <small>small</small> text.</p>

Text Alignment

You can align text using classes like .text-left, .text-center, and .text-right.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Text Colors

Bootstrap provides utility classes to set the text color.

<p class="text-primary">Primary text.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-success">Success text.</p>
<p class="text-danger">Danger text.</p>
<p class="text-warning">Warning text.</p>
<p class="text-info">Info text.</p>
<p class="text-light bg-dark">Light text.</p>
<p class="text-dark">Dark text.</p>
<p class="text-muted">Muted text.</p>
<p class="text-white bg-dark">White text.</p>

Blockquotes

Blockquotes are used to style quoted content.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists in Bootstrap 4

Bootstrap styles both ordered and unordered lists. You can also remove the default list styling using .list-unstyled or use .list-inline for inline lists.

<ul class="list-unstyled">
  <li>This is a list item.</li>
  <li>Another list item.</li>
  <li>Yet another list item.</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Inline item 1</li>
  <li class="list-inline-item">Inline item 2</li>
  <li class="list-inline-item">Inline item 3</li>
</ul>

Responsive Font Sizes

Bootstrap 4 supports responsive font sizes, which adjust the font size based on the screen size.

<p class="h1">Responsive heading (h1)</p>
<p class="h2">Responsive heading (h2)</p>
<p class="h3">Responsive heading (h3)</p>
<p class="h4">Responsive heading (h4)</p>
<p class="h5">Responsive heading (h5)</p>
<p class="h6">Responsive heading (h6)</p>

Lead Paragraph

The .lead class makes a paragraph stand out by making the font size larger.

<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

Complete Bootstrap 4 Typography Example

Here is a complete example that demonstrates various Bootstrap 4 typography features:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Bootstrap 4 Typography Example</title>
</head>
<body>
  <div class="container">
    <h1 class="display-1">Display 1</h1>
    <h2 class="display-2">Display 2</h2>
    <h3 class="display-3">Display 3</h3>
    <h4 class="display-4">Display 4</h4>
    
    <p>This is <strong>bold</strong> text.</p>
    <p>This is <em>italic</em> text.</p>
    <p>This is <small>small</small> text.</p>
    
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    
    <p class="text-primary">Primary text.</p>
    <p class="text-secondary">Secondary text.</p>
    <p class="text-success">Success text.</p>
    <p class="text-danger">Danger text.</p>
    <p class="text-warning">Warning text.</p>
    <p class="text-info">Info text.</p>
    <p class="text-light bg-dark">Light text.</p>
    <p class="text-dark">Dark text.</p>
    <p class="text-muted">Muted text.</p>
    <p class="text-white bg-dark">White text.</p>
    
    <blockquote class="blockquote">
      <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    
    <ul class="list-unstyled">
      <li>This is a list item.</li>
      <li>Another list item.</li>
      <li>Yet another list item.</li>
    </ul>
    
    <ul class="list-inline">
      <li class="list-inline-item">Inline item 1</li>
      <li class="list-inline-item">Inline item 2</li>
      <li class="list-inline-item">Inline item 3</li>
    </ul>
    
    <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

This example incorporates various typography elements provided by Bootstrap 4, allowing you to see how each class affects the text styling.

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Column Ordering

Next: Text Alignment

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.