Bootstrap text bold example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To make text bold in bootstrap, use fw-bold class in your tag, it will change font weight of text as a bold.

Here the list of class based on version to use to make text bold in bootstrap.

  1. fw-bold for bootstrap 5 version
  2. font-weight-bold for bootstrap 4 version
  3. use <strong> tag for bootstrap 3, 2, 1 version.

In this tutorial, we will learn bootstrap to make bold text.

Let’s start the tutorial bootstrap text bold example

bootstrap 5 bold text example

The bootstrap 5 version provide fw-bold class to make text bold and this following example, we also see use bootstrap class to make text more bolder and lighter.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <p class="fw-bold">Bold text.</p>
    <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
    <p class="fw-semibold">Semibold weight text.</p>
    <p class="fw-normal">Normal weight text.</p>
    <p class="fw-light">Light weight text.</p>
    <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
    <p class="fst-italic">Italic text.</p>
    <p class="fst-normal">Text with normal font style</p>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Here, the output of the above bootstrap 5 bold text example code.

bootstrap 5, bold text

Try it Yourself

bootstrap 4 bold text example

The bootstrap 4 version provide font-weight-bold class to make text bold and this following example, we also see use bootstrap class to make text more bolder and lighter.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <p class="font-weight-bold">Bold text.</p>
    <p class="font-weight-bolder">
      Bolder weight text (relative to the parent element).
    </p>
    <p class="font-weight-normal">Normal weight text.</p>
    <p class="font-weight-light">Light weight text.</p>
    <p class="font-weight-lighter">
      Lighter weight text (relative to the parent element).
    </p>
    <p class="font-italic">Italic text.</p>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Here, the output of the above bootstrap 5 bold text example code.

bootstrap 4, bold text

Try it Yourself

HTML bold text example

Lower then bootstrap 4 version is not provide any class to make text bold but you can use HTML strong and b tag to make text bold.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>HTML Bold Text</title>
  </head>
  <body>
    <p>
      The following snippet of text is
      <strong>rendered as bold text using strong tag.</strong>
    </p>
    <p>
      The following snippet of text is
      <b>rendered as bold text using b tag.</b>
    </p>
  </body>
</html>

Here, the output of the above html bold text example code.

html, bold text

Try it Yourself

CSS bold text example

Lower then bootstrap 4 version is not provide any class to make text bold but you can use CSS font-weight style to make text bold.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CSS Bold Text</title>
    <style>
      .bold-text {
        font-weight: Bold;
      }
    </style>
  </head>
  <body>
    <p>
      The following snippet of text is
      <span class="bold-text">rendered as bold text using CSS.</span>
    </p>
  </body>
</html>

Here, the output of the above CSS bold text example code.

CSS, bold text

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts