Bootstrap - Typography

This chapter, will discuss about the various typography related features provided by Bootstrap. Typography is the art of making the written matter look legible, attractive and appealing when displayed.

Bootstrap Default / Global Settings

The latest version of Bootstrap sets the default settings for display, typography and link styles. Following are some of the default settings:

Bootstrap sets a default font-size of 1rem, 16px by default.
Bootstrap sets the line-height as 1.5
For optimum text rendering on every device and OS through font-family, use the "Native Font Stack".
The $body-bg variable should be used to set a background-color on the <body> tag, where #fff is by default.
The global link color can be set using the variable $link-color and apply link underlines only on :hover.
To apply the typographic base to the <body> tag, use the attributes such as $font-family-base, $font-size-base, and $line-height-base.

One must set the $font-size-base in rem. The global variables are defined in _variables.scss and the styles within _reboot.scss.

Headings

The HTML heading tags i.e. <h1> to <h6> are styled in bootstrap in the following way:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography - Headings </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h1>Heading 1 - h1</h1>
    <h2>Heading 2 - h2</h2>
    <h3>Heading 3 - h3</h3>
    <h4>Heading 4 - h4</h4>
    <h5>Heading 5 - h5</h5>
    <h6>Heading 6 - h6</h6>
 </body>
 </html>

The classes .h1 to .h6 are also available in bootstrap, to match the font styling of a heading without using the associated HTML element.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography - Headings Classes </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 <body>
    <p class="h1">Class h1 - Heading 1</p>
    <p class="h2">Class h2 - Heading 2</p>
    <p class="h3">Class h3 - Heading 3</p>
    <p class="h4">Class h4 - Heading 4</p>
    <p class="h5">Class h5 - Heading 5</p>
    <p class="h6">Class h6 - Heading 6</p>
 </body>
</html>

Customizing Headings

The utility classes provided by bootstrap can be used to customize the headings.

Example

You can edit and try running this code using the Edit & Run option.

    
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography - Customizing Headings </title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <p>This is an example to show the customized heading.</p>
      <h4>
        Here the text will
      <small class="text-muted"> be customized through this class.</small>
      </h4>
   </body>
</html>

Display Headings

When the headings are to be displayed in a larger and opinionated style, then the display heading classes can be used.

Example

You can edit and try running this code using the Edit & Run option.

    
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography - Display Headings </title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <p class="display-1">Display 1 - Heading 1</p>
      <p class="display-2">Display 2 - Heading 2</p>
      <p class="display-3">Display 3 - Heading 3</p>
      <p class="display-4">Display 4 - Heading 4</p>
      <p class="display-5">Display 5 - Heading 5</p>
      <p class="display-6">Display 6 - Heading 6</p>
   </body>
</html>

Lead

The class .lead makes the paragraph stand out. It gives a larger font size, lighter weight, and a taller line height to the text in a paragraph.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Lead </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <p class="lead">
       The class lead will make the paragraph look different from the regular paragraph. It looks “stand-out”.
     </p>
   </body>
</html>

Abbreviations

The <abbr> element of HTML is styled by bootstrap where the fullform of the abbreviations and the acronyms is shown on hover and the text is displayed with a light dotted line at the bottom of the text.

Use .initialism class to an abbreviation, in order to get a slightly smaller font size.

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Abbreviations </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <p><abbr title="Indian Space Research Organisation">ISRO</abbr></p>
     <p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p>
   </body>
</html>

Blockquote

When a block of content needs to be added in a document as a quote, class .blockquote is used around the <blockquote> html element. Here is an example:

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Blockquote </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <h4>Example for blockquote</h4>
     <p>Refer the quote given below.</p>
       <blockquote class="blockquote">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
       </blockquote>
   </body>
</html>

Naming a Source

Bootstrap provides a class .blockquote-footer inside the <footer> element for identifying the source. <cite> tag is used to wrap the name of the source work.

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Naming Source </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <h4>Example for Naming a Source</h4>
     <p>Refer the quote given below.</p>
       <blockquote class="blockquote">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
         <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
       </blockquote>
   </body>
</html>

Alignment

Bootstrap provides classes to change the alignment of the blockquote, such as .text-center and .text-right.

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Blockquote Alignment </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <h4>Example for alignment of blockquote</h4>
      <p>Refer the quote given below.</p>
        <blockquote class="blockquote text-center">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
         <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
        </blockquote>
    </body>
</html>

Inline Text Elements

Instead of using the common inline HTML5 elements, bootstrap provides the classes that can be used for styling of the text. Follow some of the examples given below:

.mark

Class .mark will mark or highlight the text for reference. It works same as <mark> element.

Example

You can edit and try running this code using the Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
     <head>
        <title>Bootstrap Typography Inline Elements</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
        <h4>Use of mark </h4>  
        <p>Demonstrating use of mark tag to <mark> highlight </mark>  text.</p>
        <p class="mark">Demonstrating use of mark class to highlight text.</p>
     </body>
  </html>

.small

Class .small represents the text as fineprint, such as copyright and legal text. It works same as <small> element.

Example

You can edit and try running this code using the Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h4>Use of small</h4>
      <p>Demonstrating use of <small> tag to make the text look fineprint.</p>
      <p class="small">Demonstrating use of small class to make the text look fineprint.</p>
    </body>
  </html>

.text-decoration-underline

Class .text-decoration-underline renders the text as underlined. It works same as <u> element

Example

You can edit and try running this code using the Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h4>Use of .text-decoration-underline</h4>
      <p>Demonstrating use of <u> tag to make the text underlined.</p>
      <p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p>
    </body>
  </html>

.text-decoration-line-through

Class .text-decoration-line-through treats the text as no longer accurate. It works same as <s> element

Example

You can edit and try running this code using the Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
    <head>  
      <title>Bootstrap Typography Inline Elements</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h4>Use of .text-decoration-line-through</h4>
      <p>Demonstrating use of s tag to treat the text as no longer accurate.</p>
      <p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p>
    </body>
  </html>

<del>

<del> element treats a line of text as deleted.

Example

You can edit and try running this code using the Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h4>Use of <del> element</h4>
      <p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p>
    </body>
  </html>

<strong>

<strong> element renders a line of text as bold.

Example

You can edit and try running this code using the Edit & Run option.

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Bootstrap Typography Inline Elements</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <h4>Use of strong element</h4>
     <p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p>
   </body>
</html>

<em>

<em> element renders a line of text as italicized.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Inline Elements</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Use of em element</h4>
    <p><em>Demonstrating use of em tag to render the text as italicized.</em></p>
  </body>
</html>

Lists

Unstyled

The class .list-unstyled removes the default style of list and the left margin on the items of the list. However, this style only applies to the immediate child elements.

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography Lists</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <h4>Use of .list-unstyled</h4>
      <p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p>
      <ul class="list-unstyled">
         <li>Snacks</li>
         <li>Beverages
           <ul class="list">
             <li>Cold Beverage</li>
             <li>Hot Beverage</li>
           </ul>
         </li>
         </ul>
   </body>
</html>

Inline

Bootstrap provides a combination of two classes, .list-inline and .list-inline-item, that removes a list's bullets and adds some margin or space in between the listed items.

Example

You can edit and try running this code using the Edit & Run option.

        
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Lists</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Use of .list-inline and .list-inline-item</h4>
    <p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p>
    <ul class="list-inline">
      <li class="list-inline-item">Tea</li>
      <li class="list-inline-item">Coffee</li>
      <li class="list-inline-item">Juice</li>
    </ul>
  </body>
</html>

Description List Alignment

Bootstrap provides predefined classes to be added to the <dl>, <dt>, and <dd> tags of HTML to align terms and descriptions horizontally. One can optionally add the class .text-truncate to truncate the text with an ellipsis.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Description List Alignment</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Use of classes for description list alignment</h4>
    <p>The predefined classes of bootstrap help to align terms and description in grid form.</p>
    <dl class="row">
       <dt class="col-sm-3">Description Lists</dt>
       <dd class="col-sm-9">This tag shows the description of the term</dd>
       <dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt>
       <dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd>
    </dl>
  </body>
</html>

Responsive Font Sizes

Responsive font sizes are enabled in bootstrap 5 by default, allowing the text to scale automatically across all the devices and viewport sizes. It is abbreviated as RFS and is capable of rescaling the text with unit values like margin, padding, border-radius, or even box-shadow.

The RFS automatically calculates the appropriate values as per the dimensions of the browser viewport.

Kickstart Your Career

Get certified by completing the course

Get Started