Twitter Bootstrap 3 0 how do I badge badge-important now

Question

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

User · Answer

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.

User · Answer

Another possible way  in order to make the colors a bit more intense  is this one    lt span class  badge progress-bar-info  gt 10 lt  span gt   lt span class  badge progress-bar-success  gt 20 lt  span gt   lt span class  badge progress-bar-warning  gt 30 lt  span gt   lt span class  badge progress-bar-danger  gt 40 lt  span gt    See Bootply

User · Answer

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    lt span class  label label-default label-as-badge  gt hello lt  span gt   lt span class  badge  gt world lt  span gt      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    lt span class  label label-success label-as-badge  gt Yay  Rah  lt  span gt      Or where things are bigger    lt div style  font-size  36px  gt  lt  -- pretend an enclosing class has big font size -- gt       lt span class  label label-success label-as-badge  gt Yay  Rah  lt  span gt   lt  div gt        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    lt span class  label label-pill label-default  gt Default lt  span gt   lt span class  label label-pill label-primary  gt Primary lt  span gt   lt span class  label label-pill label-success  gt Success lt  span gt   lt span class  label label-pill label-info  gt Info lt  span gt   lt span class  label label-pill label-warning  gt Warning lt  span gt   lt span class  label label-pill label-danger  gt Danger lt  span gt        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

User · Answer

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-       lt span class  badge alert-info  gt badge lt  span gt  Info    lt span class  badge alert-success  gt badge lt  span gt  Success     lt span class  badge alert-danger  gt badge lt  span gt  Danger       lt span class  badge alert-warning  gt badge lt  span gt  Warning   Alerts Docu  http   getbootstrap com components  alerts  With class  badges progress-bar-    as suggested by  clami219      lt span class  badge progress-bar-info  gt badge lt  span gt  Info    lt span class  badge progress-bar-success  gt badge lt  span gt  Success    lt span class  badge progress-bar-danger  gt badge lt  span gt  Danger    lt span class  badge progress-bar-warning  gt badge lt  span gt  Warning   Progress-Bar Docu  http   getbootstrap com components  progress-alternatives

User · Answer

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

User · Answer

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     Bootply

User · Answer

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     lt a href     gt Inbox  lt span class  badge label-warning  gt 42 lt  span gt  lt  a gt  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

User · Answer

Like the answer above but here is using bootstrap 3 names and colours    x000D   x000D    css to add back colours for badges and make use of the colours   x000D   badge-default   x000D    background-color   999999  x000D    x000D   x000D   badge-primary   x000D    background-color   428bca  x000D    x000D   x000D   badge-success   x000D    background-color   5cb85c  x000D    x000D   x000D   badge-info   x000D    background-color   5bc0de  x000D    x000D   x000D   badge-warning   x000D    background-color   f0ad4e  x000D    x000D   x000D   badge-danger   x000D    background-color   d9534f  x000D    x000D   x000D   x000D

User · Answer

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

[twitter-bootstrap] Twitter Bootstrap 3.0 how do I "badge badge-important" now

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3