Bootstrap badge with image example
May 20, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To make a badge with image , put the .notify-badge class. it will show the image badge on a page.
In this tutorial, we will learn to create a bootstrap badge with image.
we have attempted to place a notification style badge over an image. we have used Twitters Bootstrap as a base framework and created a custom CSS class called notify-badge.
Table of contents
- Includes bootstrap library
- Includes css in html page
- Define its class name
This article will guide you to adding badge with image 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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>Step 2 Includes css in html page
Here we will use css to get the badge to the right place.
<style>
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
</style>Step 3: Define its class name
After that, create the badge with image with a class name .notify-badge.
<div class="container mt-3">
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="image/pngtree.jpg" alt="" width="300" />
</a>
</div>
</div>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
</style>
</head>
<body>
<div class="container mt-3">
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="image/pngtree.jpg" alt="" width="300" />
</a>
</div>
</div>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍