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