CODEWITHSUNDEEP
cssbootstrap-4icons
Alghany Jagad
Alghany Jagad

Reputation: 259

How to add badge on top of icon in bootstrap

So i want to add badge on top of the icon but it always show in the right of the icon

Here's the screenshot:

enter image description here

this is my code:

<li class="nav-item mr-3">
    <a href="#" class="nav-link nav-icon">
        <i class="uil uil-bell">
           <span class="badge badge-light">2</span>
        </i>
    </a>
</li>

i want to look like this:

enter image description here

Upvotes: 4

Views: 10728

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2137

You can do this by using position: absolute.

.iconClass{
  position: relative;
}
.iconClass span{
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<li class="nav-item mr-3" style="width: 40px;">
    <a href="#" class="nav-link nav-icon iconClass">
        <i class="fas fa-bell"></i>
        <span class="badge badge-light">2</span>
    </a>
  </li>

Upvotes: 13

razvanstan
razvanstan

Reputation: 32

Put the bage on the same level with icon. Set:

position: relative; to nav-icon

position: absolute; top: -5px; right: -5px; to badge; (top and right adjust for your needs)

<li class="nav-item mr-3">
  <a href="#" class="nav-link nav-icon">
    <i class="uil uil-bell"></i>
    <span class="badge badge-light">2</span>
  </a>
</li>

Upvotes: 1

Related Questions