Bootstrap badge with image example

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.

<!-- 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.

Bootstrap, Badge, With, Image

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.

Related Posts