Basic Typography: Headings, paragraphs, lists

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.

1. 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>

2. Display Headings

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>

3. 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>

4. 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>

5. 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>

6. 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>

7. Lists

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>

8. 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>

9. Lead

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>

Example Code

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.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us