<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <span class="badge badge-default badge-labeled">Default <i class="fa fa-times"></i></span> <span class="badge badge-primary badge-labeled">Primary <i class="fa fa-check"></i></span> <span class="badge badge-success badge-labeled">Success <i class="fa fa-check"></i></span> <span class="badge badge-info badge-labeled">Info <i class="fa fa-chain-broken"></i></span> <span class="badge badge-warning badge-labeled">Warning <i class="fa fa-times"></i></span> <span class="badge badge-danger badge-labeled">Danger <i class="fa fa-trash"></i></span> </div> </div>

/***** DEMO ONLY *****/ .container { margin: 10rem; } .badge { margin-right: .3rem; } /***** REQUIRED STYLES *****/ .badge-labeled { padding-top: 0; padding-bottom: 0; padding-right: 0.2rem; } .badge-labeled i { padding: 0.25em 0.3rem; cursor: pointer; position: relative; display: inline-block; right: -0.2em; background-color: #000000; background-color: rgba(0,0,0,0.2); border-left: solid 1px rgba(255,255,255,.5); border-radius: 0 0.25rem 0.25rem 0; }

$('i').on('click', function(e) { $(e.target).closest('span').remove(); })