How to override global Bootstrap Stylesheet?

Question

I am trying to change width of a drop-down in my application by setting width attribute of select tag. But width provided by me does not have any effect as it is pre-specified in global style-sheet file for select tag. I Don't want to change the global CSS file. But is it possible to re-size my drop-down without changing global CSS?

What selector are you using? Show us some code plz. – Mihey Egoroff Jan 17 '14 at 09:23 — Mihey Egoroff, Jan 17 '14 at 09:23

score 0 · Answer 1 · answered Jan 17 '14 at 09:37

I will disagree using !important should be used only when it is really needed, because in the longrun it will cause issues for people who will maintain the code.

1) Create a separate css file & and place your rules there.

2) Include it after bootstrap includes.

3) Make sure to be specific regarding the path of your html element you need to change

For example if this is specified

<!DOCTYPE html>
<html>
    <head>
        <style>
            div#test table#sometable td#sometd{
              color: #000;
            } 

            td#sometd{
              color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <table id="sometable">
                <tr>
                    <td id="sometd">
                        hello
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

The 'hello' text inside teh cell will remain black although you have td#sometd{color:#fff;}

This occurs because the prior css rule is more specific than the second one, hence your overriding rule could simply be:

div#test table#sometable td#sometd{
    color: #fff;
}

You should use !important wisely & as a last resort if you want to override other !important rules or inline css.

score 0 · Answer 2 · answered Jan 17 '14 at 17:05

0

Avoid using !important, try do overwrite the specificity.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

answered Jan 17 '14 at 17:05

hugodutra

31
1

score -2 · Accepted Answer · answered Jan 17 '14 at 09:23

-2

You need to add !important after your definition:

.dropDownCustom 
{
   width: 100px !important;
}

answered Jan 17 '14 at 09:23

Pavel Štěrba

2,822
2
28
50

2

[Don't use important](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css), write a more specific selector instead. – Quentin Jan 17 '14 at 09:28
Agree with @Quentin, use important wisely and only if there is REALLY no other way – Mihey Egoroff Jan 17 '14 at 09:29
But a lot of Bootstrap classes use !important too, how do you want to overide it with custom selector? – Pavel Štěrba Jan 17 '14 at 09:31
As far as I can tell, nothing in Bootstrap that that sets the width of a select element uses !important. – Quentin Jan 17 '14 at 09:33
And as far as i've checked it a second ago, bootstrap uses !important only in specific cases, such as .show/.hide classes and quick floats. – Mihey Egoroff Jan 17 '14 at 09:36
In my experience, when I was customizing some bootstrap elements, I was forced to use !important even when I don't use it normaly too. Anyway, it's information for OP if he will have problems with overwritting some style to check if it's not !important by Bootstrap. – Pavel Štěrba Jan 17 '14 at 09:36

How to override global Bootstrap Stylesheet?

3 Answers3