Lesson 3 – Bootstrap Typography

You can easily style the text and create headings, lists, paragraphs, and various other inline elements using Bootstrap typography classes. Let’s see some of these classes in action in the following sections.

Headings

Bootstrap helps you style all the headings (h1 to h6) quite easily. Take a look at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Typography</title>
</head>
<body>
    <p class="h1">This is heading 1</p>
    <p class="h2">This is heading 1</p>
    <p class="h3">This is heading 1</p>
    <p class="h4">This is heading 1</p>
    <p class="h5">This is heading 1</p>
    <p class="h6">This is heading 1</p>
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

In the above example, we have used h1 –h6 Bootstrap classes to match the style of an element with that of the headings. The above code will produce the following result.

Now, if you want your headings to stand out from rest of the content, consider using Bootstrap display classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Typography</title>
</head>
<body>
    <p class="display-1">This is heading 1</p>
    <p class="display-2">This is heading 1</p>
    <p class="display-3">This is heading 1</p>
    <p class="display-4">This is heading 1</p>
    <p class="display-5">This is heading 1</p>
    <p class="display-6">This is heading 1</p>
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Here is the output of the above code.

Text Alignment

There are also different Bootstrap classes to easily align the text within an element. The following example shows how you can use these classes in your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Typography</title>
</head>
<body>
    <div class="container">
        <p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. At reprehenderit magni recusandae repudiandae ipsum doloremque impedit. Pariatur quam nisi odio, sunt recusandae ut vel nobis ad quis. Rerum omnis fuga itaque veniam quasi sit quae magni vitae exercitationem id laudantium reprehenderit, reiciendis unde, quia distinctio ut laboriosam dolorum, vero alias.</p>
        <p class="text-left">Text aligned to left</p>
        <p class="text-right">Text aligned to right</p>
        <p class="text-center">Text aligned in center</p>
    </div>
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

The browser will interpret the above code as under.

The Lead Class

The lead is a very useful class that adds a lot of emphasis on a text in a paragraph. The following example illustrates how it works.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Helper Classes</title>
</head>
<body>
       <div class="container">
           <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               Molestias totam adipisci mollitia in nisi consectetur dolor officiis iure facere inventore!</p>
       </div>
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Here is the output of the above code.

In the next lesson, we will study Bootstrap Colors.