Currently, I am working on creating a NavBar in bootstrap with React. My goal is to add a badge in the top right corner of the button.
This is how it looks like now:
https://i.sstatic.net/04oKy.png
<div>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<span class="badge badge-success">1</span>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
My objective is to achieve this look: