Table of contents
1.
Introduction
2.
How it works
3.
Headings
4.
Subheadings
5.
Display heading
6.
Lead
7.
Styling Text
8.
Abbreviations
9.
Blockquote 
10.
Lists
11.
Frequently Asked Questions
12.
Key Takeaways
Last Updated: Mar 27, 2024

Bootstrap Typography

Author Abhay Trivedi
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?


 Source: Bootstrap 5

Introduction

Typography is the art & style of arranging letters and characters to form words and sentences which are legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, including typefaces, sizes, line lengths, line-spacing, letter-spacing, and the space between pairs of letters that aim to elicit specific emotions and convey precise messages.

Bootstrap Typography helps you create and style different inline elements like headings, paragraphs, abbreviations, blockquotes, lists, etc.

How it works

Include the following link in the <head> element to use bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Headings

HTML has 6 heading elements which range from <h1> to <h6>.

  <h1>This is Heading h1</h1>
  <h2>This is Heading h2</h2>
  <h3>This is Heading h3</h3>
  <h4>This is Heading h4</h4>
  <h5>This is Heading h5</h5>
  <h6>This is Heading h6</h6>

 

Output:-

Subheadings

To add subheadings to your text, add <small> around any element or add .small class to that element, and you will get smaller text in a lighter color. Here is an example.

  <h1>This is Heading h1. <small>small Heading h1</small></h1>
  <h2>This is Heading h2. <small>small Heading h2</small></h2>
  <h3>This is Heading h3. <small>small Heading h3</small></h3>
  <h4>This is Heading h4. <small>small Heading h4</small></h4>
  <h5>This is Heading h5. <small>small Heading h5</small></h5>
  <h6>This is Heading h6. <small>small Heading h6</small></h6>

 

Output:-

Display heading

It is a more prominent and slightly more optional heading style.

  <h1 class="display-1">This is display-1</h1>
  <h1 class="display-2">This is display-2</h1>
  <h1 class="display-3">This is display-3</h1>
  <h1 class="display-4">This is display-4</h1>
  <h1 class="display-5">This is display-5</h1>
  <h1 class="display-6">This is display-6</h1>

 

Output:-

Lead

You can make your paragraphs stand out by adding .lead class to the <p>.

<p class="lead">
  This is a lead paragraph. It appears slightly more prominent.
</p>
<p>
  This is a regular paragraph.
</p>

 

Output:-

Styling Text

You can also style the text as follows, although we do not recommend doing that because we use CSS for styling, and it is an excellent practice to do all the styling entirely in the CSS file.

  <small>This text is within < small > tag.</small><br>
  <strong>This text is within < strong > tag.</strong><br>
  <em>This text is within < em > tag.</em><br>

  <p class = "text-muted">This text is muted</p>
  <p class = "text-primary">This text is within a primary class</p>
  <p class = "text-success">This text is within a success class</p>
  <p class = "text-warning">This text is within a warning class</p>
  <p class = "text-danger">This text is within a danger class</p>
  <p class = "text-info">This text is within a info class</p>
  <p>You can use < mark > tag to <mark>highlight</mark> text.</p>
  <p><del>This line of text is deleted.</del></p>
  <p><s>This line of text is no longer correct.</s></p>
  <p><ins>This line of text is an addition to some document.</ins></p>
  <p><u>This line of text is underlined.</u></p>
  <p><small>This line of text is a fine print.</small></p>
  <p><strong>This line of text is a bold text.</strong></p>
  <p><em>This line of text is an italicized text.</em></p>

 

Output:-

Abbreviations

Bootstrap styles text within <abbr> elements with a light dotted border at the bottom and reveals the full text on hover.  Add .initialism class to <abbr> to get a slightly smaller font size.

<p><abbr title="HyperText Markup Language">HTML</abbr></p>
<p><abbr title="Coding Ninjas" class="initialism">CN</abbr></p>

 

Output:-

Blockquote 

Use blockquotes for quoting blocks of content from other sources within your document.

  <figure>
    <blockquote class="blockquote">
      <p>Curiosity expands your knowledge base and pushes you to explore the unknown.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
      Ankush Singla Co-founder of <cite title="Source Title">Coding Ninjas</cite>
    </figcaption>
  </figure>

  <figure class="text-center">
    <blockquote class="blockquote">
      <p>The curiosity in you should continuously strive to achieve bigger and better.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
      Kannu Mittal Co-founder of <cite title="Source Title">Coding Ninjas</cite>
    </figcaption>
  </figure>

  <figure class="text-end">
    <blockquote class="blockquote">
      <p>Being curious led me to discover new paths.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
      Dhawal Parate Co-founder of <cite title="Source Title">Coding Ninjas</cite>
    </figcaption>
  </figure>

 

Output:-

Lists

You can have multiple types of lists in bootstrap. These include ordered list, unordered list, Unstyled list, Inline list, and definition list. Here is the example.

  <h4>This is an Ordered List</h4>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>

  <h4>This is an Unordered List</h4>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <h4>This is an Unstyled List</h4>
  <ul class = "list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <h4>This is an Inline List</h4>
  <ul class = "list-inline">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
  </ul>

  <h4>This is a Definition List</h4>
  <dl class="row">
    <dt class="col-sm-3">Description lists</dt>
    <dd class="col-sm-9">This type of list is perfect for defining somwthing.</dd>

    <dt class="col-sm-3">Some elusive word</dt>
    <dd class="col-sm-9">
      This is the definition of that word.
      <p>Some other useful text could be written here.</p>
    </dd>

    <dt class="col-sm-3 text-truncate">Truncated item gets truncated</dt>
    <dd class="col-sm-9">This can be useful when space is scarce.</dd>
  </dl>

 

Output:-

Check this out - Bootstrap Accordion

Frequently Asked Questions

  1. What is Bootstrap?
    Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.
     
  2. What is Typography?
    Typography is the art & style of arranging letters and characters to form words and sentences which are legible, clear, and visually appealing to the reader.
     
  3. Why do we use Typography?
    The primary objective of using typography is to make life easier for the reader by making it easier to read what you've written. It makes it possible to scan text and entices readers to engage with the text.

Key Takeaways

In this article, we learn how to use Bootstrap Typography in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Coding Ninjas Studio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Live masterclass