"Bootstrap Badges"
Bootstrap 4.0.0 Snippet by CreativeTim

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
27
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container mt-5">
<div class="title">
<h3>Badges</h3>
</div>
<span class="badge badge-pill badge-secondary">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-rose">Rose</span>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
</body>
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
27
28
29
30
31
32
33
34
35
36
37
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 25px;
line-height: 1.4em !important;
font-weight: 300;
}
.badge {
padding: 5px 12px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
line-height: 1;
}
.badge-secondary {
background-color: #6c757d;
}
.badge.badge-primary {
background-color: #9c27b0;
}
.badge.badge-info {
background-color: #00bcd4;
}
.badge.badge-success {
background-color: #4caf50;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: