Badges
The Qoduby template supports Bootstrap badge elements as standard. Only the template-specific views have been improved.
You can take a look at the Bootstrap badge elements documentation if you want. https://getbootstrap.com/docs/5.3/components/badge/
Standard
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
Standard Soft
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge badge-soft text-bg-primary">Primary</span>
<span class="badge badge-soft text-bg-secondary">Secondary</span>
<span class="badge badge-soft text-bg-success">Success</span>
<span class="badge badge-soft text-bg-danger">Danger</span>
<span class="badge badge-soft text-bg-warning">Warning</span>
<span class="badge badge-soft text-bg-info">Info</span>
<span class="badge badge-soft text-bg-light">Light</span>
<span class="badge badge-soft text-bg-dark">Dark</span>
Pill
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
Pill Soft
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded-pill badge-soft text-bg-primary">Primary</span>
<span class="badge rounded-pill badge-soft text-bg-secondary">Secondary</span>
<span class="badge rounded-pill badge-soft text-bg-success">Success</span>
<span class="badge rounded-pill badge-soft text-bg-danger">Danger</span>
<span class="badge rounded-pill badge-soft text-bg-warning">Warning</span>
<span class="badge rounded-pill badge-soft text-bg-info">Info</span>
<span class="badge rounded-pill badge-soft text-bg-light">Light</span>
<span class="badge rounded-pill badge-soft text-bg-dark">Dark</span>