Bootstrap Labels - Component Snippets
Bootstrap labels and badges components, beautifully designed for clean UI
Label Style 1
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label primary-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label primary-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label primary-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label primary-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.primary-label {
background: var(--primary);
color: var(--white);
}
.label.primary-label-outline {
color: var(--primary);
border-color: var(--primary);
}Label Style 2
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label success-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label success-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label success-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label success-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label success-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label success-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.success-label {
background: var(--success);
color: var(--white);
}
.label.success-label-outline {
color: var(--success);
border-color: var(--success);
}Label Style 3
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label info-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label info-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label info-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label info-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label info-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label info-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.info-label {
background: var(--info);
color: var(--white);
}
.label.info-label-outline {
color: var(--info);
border-color: var(--info);
}Label Style 4
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label caution-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label caution-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label caution-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label caution-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.caution-label {
background: var(--caution);
color: var(--white);
}
.label.caution-label-outline {
color: var(--caution);
border-color: var(--caution);
}Label Style 5
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label error-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label error-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label error-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label error-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label error-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label error-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.error-label {
background: var(--error);
color: var(--white);
}
.label.error-label-outline {
color: var(--error);
border-color: var(--error);
}Label Style 6
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label accent-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label-outline"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label accent-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label accent-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="label accent-label-outline rounded-full icon-right"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.accent-label {
background: var(--accent);
color: var(--white);
}
.label.accent-label-outline {
color: var(--accent);
border-color: var(--accent);
}Label Style 7
<ul class="d-flex flex-wrap mb-4">
<li class="me-3 mb-3">
<label class="label secondary-label"> Std Label </label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label-outline">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label-outline rounded-full">
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label-outline icon-left">
<i class="lni lni-play"></i> Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label rounded-full icon-left">
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label
class="label secondary-label-outline rounded-full icon-left"
>
<i class="lni lni-play"></i>
Std Label
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label-outline icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label class="label secondary-label rounded-full icon-right">
Std Label <i class="lni lni-play"></i>
</label>
</li>
<li class="me-3 mb-3">
<label
class="
label
secondary-label-outline
rounded-full
icon-right
"
>
Std Label <i class="lni lni-play"></i>
</label>
</li>
</ul>.label {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
border: 1px solid transparent;
background: transparent;
}
.label.rounded-full {
border-radius: 50px;
padding: 4px 12px;
}
.label.icon-left i {
padding-right: 6px;
}
.label.icon-right i {
padding-left: 6px;
}
.label.secondary-label {
background: var(--secondary);
color: var(--white);
}
.label.secondary-label-outline {
color: var(--secondary);
border-color: var(--secondary);
}