<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-4"> <button type="button" class="btn btn-primary btn-badge shadow-sm"> Primary <span class="badge badge-pill badge-danger">1</span> </button> </div>

.btn-badge { position: relative; } .btn-badge > .badge { font-weight: normal; position: absolute; right: -0.5em; top: -0.5em; }