"Labels & Badges"
Bootstrap 3.2.0 Snippet by mohsinirshad

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
<div class="row">
<h2>Labels & Badges</h2>
<div class="row">
<div class="col-md-4">
<hr/>
<p>
<span class="label">Default</span>
<span class="label label-success arrowed"> Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important arrowed-in">Important</span>
<span class="label label-info arrowed-in-right arrowed">Info</span>
<span class="label label-inverse">Inverse</span>
</p>
<hr/>
</div>
<div class="col-md-4">
<hr/>
<p>
<span class="badge">1</span>
<span class="badge badge-grey">1</span>
<span class="badge badge-success">2</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
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
.label { border-radius: 0; text-shadow: none; font-size: 11px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important }
.label[class*="span"][class*="arrow"] { min-height: 0 }
.badge {text-shadow: none;
font-size: 12px;
padding: 1px 15px;
font-weight: normal;
line-height: 15px;
background-color: #ABBAC3!important; }
.label-transparent,
.badge-transparent { background-color: transparent!important }
.label-grey,
.badge-grey { background-color: #a0a0a0!important }
.label-info,
.badge-info { background-color: #3a87ad!important }
.label-primary,
.badge-primary { background-color: #2283c5!important }
.label-success,
.badge-success { background-color: #82af6f!important }
.label-important,
.badge-important { background-color: #d15b47!important }
.label-inverse,
.badge-inverse { background-color: #333!important }
.label-warning,
.badge-warning { background-color: #f89406!important }
.label-pink,
.badge-pink { background-color: #d6487e!important }
.label-purple,
.badge-purple { background-color: #9585bf!important }
.label-yellow,
.badge-yellow { background-color: #fee188!important }
.label-light,
.badge-light { background-color: #e7e7e7!important }
.badge-yellow,
.label-yellow { color: #963!important; border-color: #fee188 }
.badge-light,
.label-light { color: #888!important }
.label.arrowed,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Citystarit school () - 8 years ago - Reply 0