CODEWITHSUNDEEP
csstwitter-bootstrap
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

Labels and badges in bootstrap

By using bootstrap I would like to display green and red labels which context is like a v or a x.

The v should be green and the x should be red.

I wrote the following code, but I would like to have a better effect. 

<span class="badge badge-success">V</span>
<span class="badge badge-important">X</span>

Any ideas how should I get it by using bootstrap?

Here is an example of what I would get by using bootstrap labels and badges.

enter image description here

enter image description here

Upvotes: 5

Views: 14415

Answers (1)

nickhar
nickhar

Reputation: 20853

If you used font-awesome (http://fortawesome.github.com/Font-Awesome/) in combination with Twitter bootstrap (which it's designed for), you would be able to do something like this:

<i class="icon-ok-sign" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-sign" style="color: red; font-size: 18pt;"></i>
<br/><br/>

<i class="icon-ok-circle" style="color: green; font-size: 18pt;"></i>
<i class="icon-remove-circle" style="color: red; font-size: 18pt;"></i>
<br/><br/>

<i class="icon-ok" style="color: green; font-size: 14pt;"></i>
<i class="icon-remove" style="color: red; font-size: 14pt;"></i>

Which would output this:

enter image description here

Or you could use CSS classes defined elsewhere to style them appropriately.

Font-awesome is based upon SVG images and they scale to any size (within reason and use).
You can now also subset the icons you need rather than including them all by default using icnfnt.

Upvotes: 10

Related Questions