bootstrap Badges

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

View another examples Add Own solution

Tralston 75 points

                                    &lt;!-- Badge Example --&gt;
&lt;h1&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;

&lt;!-- Background colors --&gt;
&lt;span class=&quot;badge bg-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge bg-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge bg-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge bg-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge bg-warning text-dark&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge bg-info text-dark&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge bg-light text-dark&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge bg-dark&quot;&gt;Dark&lt;/span&gt;

&lt;!-- Pill badges --&gt;
&lt;span class=&quot;badge rounded-pill bg-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-warning text-dark&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-info text-dark&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-light text-dark&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-dark&quot;&gt;Dark&lt;/span&gt;

Thank you! 2

3 (2 Votes)

3.78

Your wrong 90 points

                                    &lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;

Thank you! 9

3.78 (9 Votes)

4.25

Whybird 75 points

                                    Add any of the below mentioned modifier classes to change the appearance 
of a badge.
&lt;span class=&quot;badge badge-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge badge-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;

Thank you! 4

4.25 (4 Votes)

4.25

Jrs 75 points

                                    Using the contextual .badge-* classes on an &lt;a&gt; element quickly provide 
actionable badges with hover and focus states.

&lt;a href=&quot;#&quot; class=&quot;badge badge-primary&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;

Thank you! 7

4.25 (8 Votes)

Lana Kova 135 points

                                    Badges scale to match the size of the immediate parent element by 
using relative font sizing and em units.
&lt;h1&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span class=&quot;badge badge-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
  Profile &lt;span class=&quot;badge badge-light&quot;&gt;9&lt;/span&gt;
  &lt;span class=&quot;sr-only&quot;&gt;unread messages&lt;/span&gt;
&lt;/button&gt;

Thank you! 0

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

bootstrap Badges

Welcome Back!

Create a Free Account