In version two I could use
badge badge-important
I see that the .badge element no longer has contextual (-success,-primary,etc..) classes.
How do i achieve the same thing in version 3?
Eg. I want warning badges and important badges in my UI
Just add this one-line class in your CSS, and use the bootstrap label
component.
.label-as-badge {
border-radius: 1em;
}
Compare this label
and badge
side by side:
<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>
They appear the same. But in the CSS, label
uses em
so it scales nicely, and it still has all the "-color" classes. So the label will scale to bigger font sizes better, and can be colored with label-success, label-warning, etc. Here are two examples:
<span class="label label-success label-as-badge">Yay! Rah!</span>
Or where things are bigger:
<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
<span class="label label-success label-as-badge">Yay! Rah!</span>
</div>
11/16/2015: Looking at how we'll do this in Bootstrap 4
Looks like .badge
classes are completely gone. But there's a built-in .label-pill
class (here) that looks like what we want.
.label-pill {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
In use it looks like this:
<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>
11/04/2014: Here's an update on why cross-pollinating alert classes with .badge
is not so great. I think this picture sums it up:
Those alert classes were not designed to go with badges. It renders them with a "hint" of the intended colors, but in the end consistency is thrown out the window and readability is questionable. Those alert-hacked badges are not visually cohesive.
The .label-as-badge
solution is only extending the bootstrap design. We are keeping intact all the decision making made by the bootstrap designers, namely the consideration they gave for readability and cohesion across all the possible colors, as well as the color choices themselves. The .label-as-badge
class only adds rounded corners, and nothing else. There are no color definitions introduced. Thus, a single line of CSS.
Yep, it is easier to just hack away and drop in those .alert-xxxxx
classes -- you don't have to add any lines of CSS. Or you could care more about the little things and add one line.
list-group
with badges
is a nice out-of-the-box feature in bootstrap. For those watching, here's what that looks like: getbootstrap.com/components/#list-group-badges
Commented
Nov 13, 2014 at 1:39
.list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Commented
Jun 18, 2015 at 18:56
In short: Replace badge-important
with either alert-danger
or progress-bar-danger
.
It looks like this: Bootply Demo.
You might combine the CSS class badge
with alert-*
or progess-bar-*
to color them:
With class="badges alert-*"
<span class="badge alert-info">badge</span> Info
<span class="badge alert-success">badge</span> Success
<span class="badge alert-danger">badge</span> Danger
<span class="badge alert-warning">badge</span> Warning
Alerts Docu: http://getbootstrap.com/components/#alerts
With class="badges progress-bar-*"
(as suggested by @clami219)
<span class="badge progress-bar-info">badge</span> Info
<span class="badge progress-bar-success">badge</span> Success
<span class="badge progress-bar-danger">badge</span> Danger
<span class="badge progress-bar-warning">badge</span> Warning
Progress-Bar Docu: http://getbootstrap.com/components/#progress-alternatives
Bootstrap 3 removed those color options for badges. However, we can add those styles manually. Here's my solution, and here is the JS Bin:
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.badge:hover {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.badge-error {
background-color: #b94a48;
}
.badge-error:hover {
background-color: #953b39;
}
.badge-warning {
background-color: #f89406;
}
.badge-warning:hover {
background-color: #c67605;
}
.badge-success {
background-color: #468847;
}
.badge-success:hover {
background-color: #356635;
}
.badge-info {
background-color: #3a87ad;
}
.badge-info:hover {
background-color: #2d6987;
}
.badge-inverse {
background-color: #333333;
}
.badge-inverse:hover {
background-color: #1a1a1a;
}
The context classes for badge
are indeed removed from Bootstrap 3, so you'd have to add some custom CSS to create the same effect like...
.badge-important{background-color:#b94a48;}
Another possible way, in order to make the colors a bit more intense, is this one:
<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>
See Bootply
If using a SASS version (eg: thomas-mcdonald's one), then you may want to be slightly more dynamic (honor existing variables) and create all badge contexts using the same technique as used for labels:
// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
@include label-variant($label-default-bg);
}
.badge-primary {
@include label-variant($label-primary-bg);
}
.badge-success {
@include label-variant($label-success-bg);
}
.badge-info {
@include label-variant($label-info-bg);
}
.badge-warning {
@include label-variant($label-warning-bg);
}
.badge-danger {
@include label-variant($label-danger-bg);
}
The LESS equivalent should be straightforward.
Like the answer above but here is using bootstrap 3 names and colours:
/*css to add back colours for badges and make use of the colours*/
.badge-default {
background-color: #999999;
}
.badge-primary {
background-color: #428bca;
}
.badge-success {
background-color: #5cb85c;
}
.badge-info {
background-color: #5bc0de;
}
.badge-warning {
background-color: #f0ad4e;
}
.badge-danger {
background-color: #d9534f;
}
When using the LESS version you can import mixins.less and create your own classes for colored badges:
.badge-warning {
.label-variant(@label-warning-bg);
}
Same for the other colors; just replace warning with danger, success, etc.
Well, this is a terribly late answer but I think I'll still put my two cents in... I could have posted this as a comment because this answer doesn't essentially add any new solution but it does add value to the post as yet another alternative. But in a comment I wouldn't be able to give all the details because of character limit.
NOTE: This needs an edit to bootstrap CSS file - move style definitions for .badge
above .label-default
. Couldn't find any practical side effects due to the change in my limited testing.
While broc.seib's solution is probably the best way to achieve the requirement of OP with minimal addition to CSS, it is possible to achieve the same effect without any extra CSS at all just like Jens A. Koch's solution or by using .label-xxx
contextual classes because they are easy to remember compared to progress-bar-xxx
classes. I don't think that .alert-xxx
classes give the same effect.
All you have to do is just use .badge
and .label-xxx
classes together (but in this order). Don't forget to make the changes mentioned in NOTE above.
<a href="#">Inbox <span class="badge label-warning">42</span></a>
looks like this:
IMPORTANT: This solution may break your styles if you decide to upgrade and forget to make the changes in your new local CSS file. My solution for this challenge was to copy all .label-xxx
styles in my custom CSS file and load it after all other CSS files. This approach also helps when I use a CDN for loading BS3.
**P.S: ** Both the top rated answers have their pros and cons. It's just the way you prefer to do your CSS because there is no "only correct way" to do it.
.danger
,.success
etc. class style definitions out of the box for general use cases like this.