Adding custom class based on Bootstrap CSS 2.3.2

Question

I've included Bootstrap CSS, and now want to add a custom class in my own CSS file.

It is simply an exact copy of .btn-success with modified colors and class name only:

.btn-mine {
    color: #ffffff;
    background-color: #ff8d53;
    border-color: #ef8343;
}
.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    color: #ffffff;
    background-color: #ea793e;
    border-color: #dc5930;
}
.btn-mine:active,
.btn-mine.active,
.open .dropdown-toggle.btn-mine {
    background-image: none;
}
.btn-mine.disabled,
.btn-mine[disabled],
fieldset[disabled] .btn-mine,
.btn-mine.disabled:hover,
.btn-mine[disabled]:hover,
fieldset[disabled] .btn-mine:hover,
.btn-mine.disabled:focus,
.btn-mine[disabled]:focus,
fieldset[disabled] .btn-mine:focus,
.btn-mine.disabled:active,
.btn-mine[disabled]:active,
fieldset[disabled] .btn-mine:active,
.btn-mine.disabled.active,
.btn-mine[disabled].active,
fieldset[disabled] .btn-mine.active {
    background-color: #ff8d53;
    border-color: #ff6314;
}
.btn-mine .caret {
    border-top-color: #fff;
}
.dropup .btn-mine .caret {
    border-bottom-color: #fff;
}

Unfortunately, this does not work, as shown here: http://jsfiddle.net/qG2n6/.

I know there are many 3rd-party Bootstrap button makers which can create buttons of any colors.

But I am more interested in knowing why my approach above does not work.

I copy all the styles that contains .btn-success in the original Bootstrap CSS, and only modify the colors and the class name, and I expected it to work.

What am I missing here?

Is the CSS file loaded into the web-page? Are you using the class? — Lajos Arpad
– Lajos Arpad, Commented Aug 29, 2013 at 1:04

majorhavoc · Accepted Answer · 2013-08-29 00:40:43Z

1

.btn-success contains

.btn-success {
background-color: #5BB75B;
background-image: linear-gradient(to bottom, #62C462, #51A351);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

While your class contains just some border and background color

answered Aug 29, 2013 at 0:40

majorhavoc

2,4151 gold badge27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MLister Over a year ago

searching for .btn-success in this file: github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css, I don't see any of the above for the class.

majorhavoc Over a year ago

It is in bootstrap-theme.css github.com/twbs/bootstrap/blob/master/dist/css/… Accept the answer if it helped. :)

MLister Over a year ago

Ah! what's the relationship between bootstrap-theme.css and bootstrap.css? Are they merged into one file for the actual Bootstrap css in release?

majorhavoc Over a year ago

They've taken out all theme related from main css file to bootstrap-theme.css So that you can easily customize the color related stuffs. This happened when they updated to v3 of bootstrap.

MLister Over a year ago

that explains it all! Thanks a lot!

willi · Accepted Answer · 2013-08-29 05:28:37Z

1

You will need to override the background-image as well. That is where the slight gradient of the buttons in Bootstrap 2.3.2 comes from. See here:

.btn-mine {
    color: #ffffff;
    background-image: none;
    background-color: #ff8d53;
    border-color: #ef8343;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

http://jsfiddle.net/qG2n6/1/

If you add background-image: none;, add the IE filter and alter the text shadow you will get your button. However, if you want a gradient to match the style of your version of Bootstrap you will need you own CSS gradient. You can use this tool to make one of your own:

http://www.colorzilla.com/gradient-editor/

Which might look something like this:

.btn-mine {
    color: #ffffff;
    border-color: #dc5930;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background: #ff8d53;
    background: -moz-linear-gradient(top,  #ff8d53 0%, #ff732d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8d53), color-stop(100%,#ff732d));
    background: -webkit-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -o-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: -ms-linear-gradient(top,  #ff8d53 0%,#ff732d 100%);
    background: linear-gradient(to bottom,  #ff8d53 0%,#ff732d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8d53', endColorstr='#ff732d',GradientType=0 );
    background-repeat: repeat-x;
}

http://jsfiddle.net/qG2n6/3/

answered Aug 29, 2013 at 5:28

willi

1293 bronze badges

2 Comments

MLister Over a year ago

i searched for .btn-success in this file: github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css, and I didn't see background, filter, etc defined for the class, are they defined somewhere else?

willi Over a year ago

@MLister that is version 3.0.0 you are linking to. They went with a more flat, and customizable, design. If you look through 2.3.2 you will find it.

Collectives™ on Stack Overflow

Adding custom class based on Bootstrap CSS 2.3.2

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related