<h3>Normal</h3>
<p class="badge bg-primary">primary</p>
<p class="badge bg-secondary">secondary</p>
<p class="badge bg-success">success</p>
<p class="badge bg-danger">danger</p>
<p class="badge bg-warning">warning</p>
<p class="badge bg-info">info</p>
<p class="badge bg-light">light</p>
<p class="badge bg-dark">dark</p>
<hr>
<h3>Pilled</h3>
<p class="badge rounded-pill bg-primary">primary</p>
<p class="badge rounded-pill bg-secondary">secondary</p>
<p class="badge rounded-pill bg-success">success</p>
<p class="badge rounded-pill bg-danger">danger</p>
<p class="badge rounded-pill bg-warning">warning</p>
<p class="badge rounded-pill bg-info">info</p>
<p class="badge rounded-pill bg-light">light</p>
<p class="badge rounded-pill bg-dark">dark</p>
<hr>
<h3>In title</h3>
<div class="d-flex">
<h4>
heading 1
<p class="badge rounded-pill bg-primary">primary-badge</p>
</h4>
<h4>
heading 2
<p class="badge rounded-pill bg-secondary">secondary-badge</p>
</h4>
<h4>
heading 3
<p class="badge rounded-pill bg-success">success-badge</p>
</h4>
<h4>
heading 4
<p class="badge rounded-pill bg-danger">danger-badge</p>
</h4>
<h4>
heading 5
<p class="badge rounded-pill bg-warning">warning-badge</p>
</h4>
<h4>
heading 6
<p class="badge rounded-pill bg-info">info-badge</p>
</h4>
<h4>
heading 7
<p class="badge rounded-pill bg-light">light-badge</p>
</h4>
<h4>
heading 8
<p class="badge rounded-pill bg-dark">dark-badge</p>
</h4>
</div>
<hr>
<h3>In Button</h3>
<button type="button" class="btn btn-outline-primary btn-sm mb-3">
heading 1
<span class="badge rounded-pill bg-primary">primary</span>
</button>
<button type="button" class="btn btn-outline-secondary btn-sm mb-3">
heading 2
<span class="badge rounded-pill bg-secondary">secondary</span>
</button>
<button type="button" class="btn btn-outline-success btn-sm mb-3">
heading 3
<span class="badge rounded-pill bg-success">success</span>
</button>
<button type="button" class="btn btn-outline-danger btn-sm mb-3">
heading 4
<span class="badge rounded-pill bg-danger">danger</span>
</button>
<button type="button" class="btn btn-outline-warning btn-sm mb-3">
heading 5
<span class="badge rounded-pill bg-warning">warning</span>
</button>
<button type="button" class="btn btn-outline-info btn-sm mb-3">
heading 6
<span class="badge rounded-pill bg-info">info</span>
</button>
<button type="button" class="btn btn-outline-light btn-sm mb-3">
heading 7
<span class="badge rounded-pill bg-light">light</span>
</button>
<button type="button" class="btn btn-outline-dark btn-sm mb-3">
heading 8
<span class="badge rounded-pill bg-dark">dark</span>
</button>
<hr>
<h3>In Listgroup</h3>
<div class="list-group">
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
primary
<span class="badge rounded-pill bg-primary">primary</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
secondary
<span class="badge rounded-pill bg-secondary">secondary</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
success
<span class="badge rounded-pill bg-success">success</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
danger
<span class="badge rounded-pill bg-danger">danger</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
warning
<span class="badge rounded-pill bg-warning">warning</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
info
<span class="badge rounded-pill bg-info">info</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
light
<span class="badge rounded-pill bg-light">light</span>
</a>
<a href="#" class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">
dark
<span class="badge rounded-pill bg-dark">dark</span>
</a>
</div>
<h3>Normal</h3>
{{#each listItems}}
<p class="badge bg-{{name}}">{{name}}</p>
{{/each}}
<hr>
<h3>Pilled</h3>
{{#each listItems}}
<p class="badge rounded-pill bg-{{name}}">{{name}}</p>
{{/each}}
<hr>
<h3>In title</h3>
<div class="d-flex">
{{#each listItems}}
<h4>
heading {{id}}
<p class="badge rounded-pill bg-{{name}}">{{name}}-badge</p>
</h4>
{{/each}}
</div>
<hr>
<h3>In Button</h3>
{{!-- <div class="d-flex"> --}}
{{#each listItems}}
<button type="button" class="btn btn-outline-{{name}} btn-sm mb-3">
heading {{id}}
<span class="badge rounded-pill bg-{{name}}">{{name}}</span>
</button>
{{/each}}
{{!-- </div> --}}
<hr>
<h3>In Listgroup</h3>
<div class="list-group">
{{#each listItems}}
<a
href="#"
class="
list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center"
>
{{name}}
<span class="badge rounded-pill bg-{{name}}">{{name}}</span>
</a>
{{/each}}
</div>
{
"listItems": [
{
"id": 1,
"name": "primary"
},
{
"id": 2,
"name": "secondary"
},
{
"id": 3,
"name": "success"
},
{
"id": 4,
"name": "danger"
},
{
"id": 5,
"name": "warning"
},
{
"id": 6,
"name": "info"
},
{
"id": 7,
"name": "light"
},
{
"id": 8,
"name": "dark"
}
]
}
No notes defined.