Bootstrap badge size example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to create badge size in bootstrap.

Given an HTML document having pill badges (In case if you don’t know what a pill badge then refer to this ) and the task is to increase the size of the badge.

Table of contents

  • Includes bootstrap library
  • Define its class name

Embedding the badge inside the heading tag:

We can also wrap the span tag of the badge in a different heading tags to achieve the desired result.

This article will guide you to adding badge size in Bootstrap with example.

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

Step 2: Define its class name

After that, create the badge over icon with a class name .badge badge-danger.

    <div class="example">
        <h3> Bootstrap badge size example  </h3>
          
        <h1>Example heading <span class="badge badge-danger">aGuideHub</span></h1>
        <h2>Example heading <span class="badge badge-danger">aGuideHub</span></h2>
        <h3>Example heading <span class="badge badge-danger">aGuideHub</span></h3>
        <h4>Example heading <span class="badge badge-danger">aGuideHub</span></h4>
        <h5>Example heading <span class="badge badge-danger">aGuideHub</span></h5>
        <h6>Example heading <span class="badge badge-danger">aGuideHub</span></h6>
        </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
  
<body>
    <div class="container">
      <div class="example">
        <h3> Bootstrap badge size example  </h3>
          
        <h1>Example heading <span class="badge badge-danger">aGuideHub</span></h1>
        <h2>Example heading <span class="badge badge-danger">aGuideHub</span></h2>
        <h3>Example heading <span class="badge badge-danger">aGuideHub</span></h3>
        <h4>Example heading <span class="badge badge-danger">aGuideHub</span></h4>
        <h5>Example heading <span class="badge badge-danger">aGuideHub</span></h5>
        <h6>Example heading <span class="badge badge-danger">aGuideHub</span></h6>
</body>
  
</html>

Check the output of the above code example.

Bootstrap, Badge, Size

All the best 👍