Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Bootstrap Font Size: A Step-by-Step Approach for Easy Layouts

What is Bootstrap Typography?

Typography is the organization of texts on a website to improve legibility or visual appeal. It emphasizes or de-emphasizes text on a web page by adjusting font size, layout styles, and letter spacing.

Different texts on a webpage can have varying degrees of relevance, therefore we may want to emphasize HTML headings by making them bold text and using the appropriate Bootstrap font size so that visitors to our website do not find it difficult to locate and understand information on our application.

Bootstrap Typography, on the other hand, is a collection of prebuilt styles and utility classes created by the Bootstrap team to allow us to easily change the appearance and feel of text on a website.

Bootstrap is a popular open-source CSS framework that is built on reusable pieces of code, written in HTML, CSS, and Javascript. Its main purpose is to enable front-end developers to quickly build fully responsive websites with minimal CSS code.

Difference Between Font and Text

In Typography, font and text can often refer to different things, we are going to analyze the differences below.

Text

Texts are characters that make up a word. Text is the most commonly occurring building block of a website, created using a specific font or typeface.

Writing the word “Hello world” is an example of a visual representation of a text.

Different text properties in CSS give us more control over the appearance of texts, since this is a bootstrap article, we will not focus on CSS text properties.

Below are some examples of CSS text properties.

PropertyDescription
text-alignDescribes how the inline contents of a block are horizontally aligned if the contents do not fill the line box. i.e text alignment can be center-aligned text, left-aligned text, and right-aligned text,
text-decorationDecorations are applied to the font used for an element’s text.
text-transformControls capitalization effects of an element’s text. Here’s an example of a CAPITALIZED TEXT
text-overflowText can overflow for example when it is prevented from wrapping.
text-shadowEnables shadow effects to be applied to the text of the element.
text-wrapThe text-wrap CSS property controls how text inside an element is wrapped.

Font

A font is a particular style that when applied changes the look of text. Let’s say you want to alter the appearance of your text such as the size and weight, etc. You can do that using a suitable font style.

A font can be a particular typeface, like Times New Roman or Arial, which has a distinctive design with elements like weight, size, and style.

Similarly, CSS has different properties of fonts as seen below.

PropertyDescription
font-familySpecifies a prioritized list of font family names or generic family names.
font-sizeThe font-size property determines the size of the text characters. It can be set using various units like pixels (px), em units (em), percentages (%), etc.
font-weightSpecifies the weight of glyphs in the font, their degree of blackness, or stroke thickness.
font-styleThe font-style property is used to specify the style of the font, such as normal, italic, or oblique.

Give Purecode a try today to instantly generate thousands of customizable, styled HTML, CSS, and JavaScript components to accelerate your web development projects.

Working with Bootstrap Font Size

To create a proper visual impact, we can adjust text sizes based on device responsiveness, content hierarchy, and design choices thanks to the bootstrap font size.

In Bootstrap, font sizes are controlled through a set of utility classes that allow you to easily adjust the size of text elements. Bootstrap provides predefined classes for various font sizes, and you can apply these classes to your HTML elements.

We’ll cover how you can use font size in Bootstrap below.

How to Set Fonts in Bootstrap

Although Bootstrap has a built-in typeface, we can easily swap it out for one of our choices.

The following steps can modify the default font:

Step 1

Visit Google Fonts, select a preferred font, and then copy the CDN link to the head tag of your HTML document as shown below.

<link
  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
  rel="stylesheet"
 />

Step 2

To get the variable for the default bootstrap font, inspect the webpage and look for the computed section, as seen in the image below.

The variable name in this instance is –bs-font-sans-serif.

Step 3

To apply the new Poppins font from Google, set the –bs-font-sans-serif variable to your custom variable as shown below.

<style>
    :root {
      --bs-font-sans-serif: Poppins, sans-serif;
    }
 </style>

The font style should reflect when you refresh your browser, and you’ll see the new font family in the inspect widget as shown below.

Putting all the steps above together, we’ll have the following source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap floating label</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
      rel="stylesheet"
    />

    <!-- Internal CSS -->
    <style>
      :root {
        --bs-font-sans-serif: Poppins, sans-serif;
      }
    </style>
  </head>
  <body class="p-5">
    Poppins font
  </body>
</html>

You can use the steps listed above to add any other font family to your Bootstrap project.

Different Text Sizes in Bootstrap

The available array of utility classes for various text sizes makes text styling easier in Bootstrap. You can easily modify the size of your text elements by using these classes. This makes it possible to style text on different sections of your website in a responsive manner.

Regardless of the text size you require — small, medium, large, or extra-large, Bootstrap offers a simple solution that makes your website content appear clean and organized.

Bootstrap Font Size Classes

Bootstrap provides utility classes like fs-1, fs-2, etc., which stand for “font-size 1”, and “font-size 2” respectively, and so on. These classes provide a quick and easy way to adjust the font size of elements.

Below is an output result of the font size classes from 1 to 6.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <p class="fs-1">fs-1 - This is the largest font size (40px).</p>
      <p class="fs-2">fs-2 -This is the default font size (32px).</p>
      <p class="fs-3">fs-3 -This is the largest font size (28px).</p>
      <p class="fs-4">fs-4 -This is the smallest font size (24px).</p>
      <p class="fs-5">fs-5 -This is the default font size (20px).</p>
      <p class="fs-6">fs-6 -This is the default font size (16px).</p>
      <p class="fs-7">fs-6 -This is the smallest font size (14px).</p>
    </div>
  </body>
</html>

The fs-6 class is the default font size provided by Bootstrap, which implies that if we add the fs-6 class or not, the font size will still be 16px or 1em regardless.

Bootstrap Heading Text Classes

Bootstrap provides us with different classes that used to style text headings depending on the level of emphasis.

Similar to the traditional HTML h1 to h6 classes, bootstrap provides us with six classes to style a text heading, which gives us the output below.

The source code:

For this example, the header tags like <h1> to <h6> are used with the header class from h1 to h6 respectively.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <h1 class="h1">Heading 1</h1>
      <h2 class="h2">Heading 2</h2>
      <h3 class="h3">Heading 3</h3>
      <h4 class="h4">Heading 4</h4>
      <h5 class="h5">Heading 5</h5>
      <h6 class="h6">Heading 6</h6>
    </div>
  </body>
</html>

The bootstrap headings can also be added by using only the <h*> tags without adding the classes as seen below.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
    </div>
  </body>
</html>

Given that Bootstrap headers may be introduced using both the classes like h1 and just the heading tags alone, you may be asking which approach is advised.

The advisable way is to use both, together.

The first bit is the element/tag. The heading tag takes care of semantics, accessibility, and SEO.

While the second bit is the class. The .h* class takes care of visual semantics and typographical hierarchy.

Can Bootstrap Heading Classes be used on Other Tags?

Yes, headings utility classes can also be added when you want to add the header styles and you don’t want to use the heading tag.

In the example below, we added the heading class to the <p> tag to make them appear like a heading tag.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <p class="h1">P tag Heading 1</p>
      <p class="h2">P tag Heading 2</p>
      <p class="h3">P tag Heading 3</p>
      <p class="h4">P tag Heading 4</p>
      <p class="h5">P tag Heading 5</p>
      <p class="h6">P tag Heading 6</p>
    </div>
  </body>
</html>

Bootstrap Text Display Classes

Headings can stand out more by using display classes. These classes are used for large, and bold headings.

Bootstrap provides six different display classes: .display-1, .display-2, .display-3, .display-4 .display-5, .display-6. With their outputs below.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <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>
      <h1 class="display-5">Display 5</h1>
      <h1 class="display-6">Display 6</h1>
    </div>
  </body>
</html>

The display classes are configured to have a high font size, below are the associated font sizes for each display class.

Propertyfont size
display-15rem
display-24.5rem
display-34rem
display-43.5rem
display-53rem
display-62.5rem

Bootstrap Lead Class

The lead class in Bootstrap lays out text paragraphs so they appear larger and more prominent. It draws attention to or highlight text, key opening sentences, or other content on a page.

It adds a larger font size and increased line height to make the text within the element with a lead class more distinct as shown below.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <h1 class="lead">
        This is a lead paragraph. It has Bootstrap style that makes this
        paragraph visually appealing.
      </h1>
      <h1>This is a normal paragraph. It has the Bootstrap default style.</h1>
    </div>
  </body>
</html>

To learn more about Bootstrap font sizes, you can check out the video below:

Bootstrap Font Weight and Italics

In Bootstrap, you can use predefined utility classes to apply italics style and manage font-weight. We’ll cover how to change the font weight and apply italics using Bootstrap classes:

Font Weight

The font-weight of texts can be changed by using the font-weight utilities which is abbreviated as .fw-*.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <p class="fw-bold">Bold font weight text.</p>
      <p class="fw-bolder">
        Bolder font weight text (relative to the parent element).
      </p>
      <p class="fw-semibold">Semibold font weight text.</p>
      <p class="fw-medium">Medium font weight text.</p>
      <p class="fw-normal">Normal font weight text.</p>
      <p class="fw-light">Light font weight text.</p>
      <p class="fw-lighter">
        Lighter font weight text (relative to the parent element).
      </p>
    </div>
  </body>
</html>

Italics Style

The italic font style is a kind of font style that makes text visually stand out by tilting characters to the right. It is frequently employed to draw attention to specific words or phrases and set text apart from the normal text style.

The image below shows the difference between normal styles and the italic styles.

The source code (The italic font style was added using the fst-italic class.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap Font Size: A Step-by-Step Approach</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="p-5">
      <p class="fst-italic">Text in Italic style</p>
      <p class="fst-normal">Text with normal font style</p>
    </div>
  </body>
</html>

Wrapping Up Font Size in Bootstrap

Bootstrap’s utility classes such as display-1, text-center, text-muted, text-lowercase makes it easier to manage font sizes and display in your application.

These classes provide a selection of preset styles so that different elements will respond and behave consistently.

Bootstrap utilities simplify text styling, whether it’s changing the text size of a paragraph or a header.

You can easily improve your project’s readability, typography, and overall attractiveness by utilizing Bootstrap’s font size classes.

Whether you’re working on paragraphs, headings, or other text elements, Bootstrap’s font size utility classes provide a convenient and efficient way to elevate your application typography.

Checkout Purecode!

I recommend you try out Purecode, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.

  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.

  • You can easily customize the generated components to suit your specific needs – change colors, spacing, paddings, margins, etc.

  • It generates both the HTML markup and CSS styles for the components, saving you development time.

  • It also includes some JavaScript functionality within the components to make them interactive

Ayodele Samuel Adebayo

Ayodele Samuel Adebayo