Hi 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.
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">NEWspan>
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">NEWspan>
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 👍
