"Labeled Badge"
Bootstrap 4.0.0 Snippet by circleb

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/***** 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$('i').on('click', function(e) {
$(e.target).closest('span').remove();
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3
Profile picture with badge
Badgebox: CSS checkbox badge

Questions / Comments: