Additional Twitter Bootstrap label/button/alert/badge colors

Question

Is there a ready-to-use pack for bootstrap to add additional colors, others than the default ones ?

Default colors are (label example) :

<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

Answer 1

you can quickly and easily set your own color set for labels, using this kind of CSS :

.label-default {
  background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}
.label-primary {
  background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

Here are 2 sets :

• default: #95a5a6 / #7f8c8d
• primary: #3498db / #2980b9
• success: #2ecc71 / #27ae60
• info: #9b59b6 / #8e44ad
• warning: #e67e22 / #d35400
• danger: #e74c3c / #c0392b

• default: #95a5a6 / #7f8c8d
• primary: #00A388 / #007D68
• success: #79BD8F / #659E78
• info: #BEEB9F / #A5CC8A
• warning: #FFFF9D / #D1D181
• danger: #FF6138 / #D6512F

Bootply example

Answer 2

Some 3rd party custom themes have added colors, but I'm not aware of a "ready to use pack". It's easy to add your own by just extending the CSS. For example here are "social" buttons..

CSS

.btn-facebook {
    background-color:#3b5998;
    color:#fff;
}
.btn-google {
    background-color:#dd4b39;
    color:#fff;
}
.btn-twitter {
    background-color:#2ba9e1;
    color:#fff;
}
.btn-pinterest {
    background-color:#cb2027;
    color:#fff;
}
.btn-tumblr {
    background-color:#2c4762;
    color:#fff;
}

Usage

<button class="btn btn-facebook btn-lg">Facebook</button>

EDIT

You could also use CSS wildcard selectors to create styles like this..

Apple colors demo: http://bootply.com/112999

Answer 3

Although the OP is asking for a "ready-to-use pack", I stumbled across this while looking for something myself. Bootstrap Button Generator offers a dead simple online tool for quickly creating additional button colors.

Also this one, it will build out the HTML and CSS for a custom button: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php

Answer 4

Even though zessx's answer is correct, maybe some users won't understand that the solution is valid for the creation of brand new classes, as my example below:

.label-alarm {
  background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
  background-color: #e0e12;
}

By adding this code, we will have a new label class called "label-alarm" besides all the standard Bootstrap classes (label-default, label-primary, etc.)

Answer 5

I am doing this with the bootstrap less mixins for buttons, and something like the following:

@import "path/to/bootstrap/mixins/buttons.less";
// Danger and error appear as red
.btn-sample {
  .button-variant(@btn-sample-color; @btn-sample-bg; @btn-sample-border);
}

This will save you a lot of time and potential errors over writing custom css, particularly if you want labels, buttons, panels, etc, all in your new color.

For whatever reason, I can't find information about this option on the Bootstrap website, but here is a third party guide to some of these options: https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

Answer 6

The AngularJS documentation also defines a couple of custom color styles, you might want to steal, if you are lazy. At least it gives you an idea, how you can create your own color scheme.

CSS

.type-hint-expression {
  background: purple;
}

.type-hint-date {
  background: pink;
}

.type-hint-string {
  background: #3a87ad;
}

.type-hint-function {
  background: green;
}

.type-hint-object {
  background: #999;
}

.type-hint-array {
  background: #F90;
}

.type-hint-boolean {
  background: rgb(18, 131, 39);
}

.type-hint-number {
  background: rgb(189, 63, 66);
}

.type-hint-regexp {
  background: rgb(90, 84, 189);
}

.type-hint-domelement {
  background: rgb(95, 158, 160);
}

Usage

<span class="label type-hint-number">number</span>

Example

https://docs.angularjs.org/api/ng/filter/limitTo#limitTo-arguments

Source

https://docs.angularjs.org/css/docs.css

PS: I do not endorse stealing code. Create your own, unique style, or at least reference the source, if you use someone else's code.