Overview
Start HTML Pro customizes the
Bootstrap Badges through the SASS variables in
src/sass/_variables.scssand adds additonal options in
src/sass/_badge.Basic
Use
.badgewith
.badge-{color}classes to set a badge's style defined with
$theme-colorsmapped in
src/sass/_variables.scss:
New
New
New
New
New
New
New
New
New
<span class="badge badge-white">New</span>
<span class="badge badge-primary">New</span>
<span class="badge badge-light">New</span>
<span class="badge badge-secondary">New</span>
<span class="badge badge-success">New</span>
<span class="badge badge-info">New</span>
<span class="badge badge-warning">New</span>
<span class="badge badge-danger">New</span>
<span class="badge badge-dark">New</span>
Light Style
Use
.badgewith
.badge-light-{color}classes to set a badge's light style defined with
$theme-light-colorsmapped in
src/sass/_variables.scss:
New
New
New
New
New
New
<span class="badge badge-light-primary">New</span>
<span class="badge badge-light-success">New</span>
<span class="badge badge-light-info">New</span>
<span class="badge badge-light-warning">New</span>
<span class="badge badge-light-danger">New</span>
<span class="badge badge-light-dark">New</span>
Square Badge
Use
.badge-squareclass to use a badge with same width and height:
5
5
5
5
5
5
5
5
5
<span class="badge badge-square badge-white">5</span>
<span class="badge badge-square badge-primary">5</span>
<span class="badge badge-square badge-light">5</span>
<span class="badge badge-square badge-secondary">5</span>
<span class="badge badge-square badge-success">5</span>
<span class="badge badge-square badge-info">5</span>
<span class="badge badge-square badge-warning">5</span>
<span class="badge badge-square badge-danger">5</span>
<span class="badge badge-square badge-dark">5</span>
Circle Badge
Use
.badge-circleclass to use a badge with circle style:
5
5
5
5
5
5
5
5
5
<span class="badge badge-circle badge-white">5</span>
<span class="badge badge-circle badge-primary">5</span>
<span class="badge badge-circle badge-light">5</span>
<span class="badge badge-circle badge-secondary">5</span>
<span class="badge badge-circle badge-success">5</span>
<span class="badge badge-circle badge-info">5</span>
<span class="badge badge-circle badge-warning">5</span>
<span class="badge badge-circle badge-danger">5</span>
<span class="badge badge-circle badge-dark">5</span>
2021©
Keenthemes
