aGuideHub

Bootstrap badge snippet image example

May 20, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

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

This snippet was created to help web designers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Table of contents

  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

This article will guide you to adding badge snippet 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"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

Step 2: Includes css in html page

Here we will use css to get the badge snippet to the right place.

      <style>
    body{
    margin-top:20px;
}

.mt-20 {
  margin-top: 20px !important;
}

.relative {
    position: relative;
}

.badge-corner:empty {
    display: inline-block;
}
.badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 66px solid #888;
    border-top-color: rgba(0, 0, 0, 0.3);
    border-left: 66px solid transparent;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.badge-corner span {
    position: absolute;
    top: -52px;
    left: -28px;
    font-size: 16px;
    color: #fff;
}
.badge-corner-base {
    border-top-color: #3498db;
}
.badge-corner-alt {
    border-top-color: #9cd70e;
}
.badge-corner-light {
    border-top-color: #ecf0f1;
}
.badge-corner-light span {
    color: #2c3e50;
}
.badge-corner-dark {
    border-top-color: #131313;
}
.badge-corner-orange {
    border-top-color: #ff8a3c;
}

.relative img{
    margin-top:6px;    
}
    </style>

Step 3: Define its class name

After that, create the badge snippet image with a class name .container bootstrap snippets bootdey.

<div class="container bootstrap snippets bootdey">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-base">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-alt">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
        <hr>
        <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-light">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-dark">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-orange">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </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"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<style>
    body{
    margin-top:20px;
}

.mt-20 {
  margin-top: 20px !important;
}

.relative {
    position: relative;
}

.badge-corner:empty {
    display: inline-block;
}
.badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 66px solid #888;
    border-top-color: rgba(0, 0, 0, 0.3);
    border-left: 66px solid transparent;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.badge-corner span {
    position: absolute;
    top: -52px;
    left: -28px;
    font-size: 16px;
    color: #fff;
}
.badge-corner-base {
    border-top-color: #3498db;
}
.badge-corner-alt {
    border-top-color: #9cd70e;
}
.badge-corner-light {
    border-top-color: #ecf0f1;
}
.badge-corner-light span {
    color: #2c3e50;
}
.badge-corner-dark {
    border-top-color: #131313;
}
.badge-corner-orange {
    border-top-color: #ff8a3c;
}

.relative img{
    margin-top:6px;    
}
</style>
</head>
<body>
<div class="container bootstrap snippets bootdey">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-base">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-alt">
              <span class="fa fa-thumbs-o-up"></span>
            </a>
          </div>
      </div>
        <hr>
        <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-light">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-dark">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="relative">
            <img src="image/393735.jpg" class="img-responsive" alt="">
            <a href="#" class="badge-corner badge-corner-orange">
              <span class="fa fa-heart"></span>
            </a>
          </div>
      </div>
    </div>
</div> 
</body>
</html>

Check the output of the above code example.

Bootstrap, Badge, Snippet, Image

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

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.

Related Posts