How to add badge on top of icon in bootstrap

Question

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:

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:

Answer 1

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>

Answer 2

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>