Bootstrap badge size example
May 19, 2022Hi 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.
All the best 👍
