Bootstrap CSS Editing

Question

I just recently installed bootstrap 3.0 onto my site and have been playing around with. I've got a couple questions regarding it;

I want to change certain specifications for the jumbotron (and other classes) in my own .css file. I have a file called "mycss.css" and have added the following code into it

.jumbotron {
    background-image: url();
    padding: 30px;
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 200;
    line-height: 2.1428571435;
    color: inherit;
    background-color: #eeeeee;
}

In my index.htm I have declared my .css as follows (after the bootstrap.min.css declaration);

<link href="css/my.css" rel="stylesheet" media="screen">

However, these changes are not being reflected on my site. Is there anything else I need to change?

Open developer tools in chrome and refresh. Then, go to "network" and look if your CSS file is being fetched at all — yuvi
– yuvi, Commented Oct 20, 2013 at 6:45
what are you trying to change exactly? you have all the same values like the default .jumbotron class, you only added an empty background-image... there's really no need to add everything in your custom CSS just the properties you want to add or modify — omma2289
– omma2289, Commented Oct 20, 2013 at 6:58
I like to put big thick borders around things when I get confused. @koala_dev has a good point. Not much to test with here. — sheriffderek
– sheriffderek, Commented Oct 20, 2013 at 17:35

Se Won Jang · Accepted Answer · 2013-10-20 04:28:12Z

0

It's called CSS Specificity.

http://stackoverflow.com/questions/12780511/how-does-a-css-rule-override-another-css-rule

"Because of CSS Specificity. A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1."

It means, the more specific your target element is, the higher weight it gets.

so if you want to specify some properties for .jumbotron class,

in order to override it, you need to make the selector more specific,

for example,

#your_id .jumbotron

This way, when your browser interpretes your CSS styles,

if chooses your style rather than Bootstrap's default style.

answered Oct 20, 2013 at 4:28

Se Won Jang

7831 gold badge5 silver badges12 bronze badges

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

5 Comments

nouveau Over a year ago

That could be it, but that means that it is probably called with too much specificity to begin with.

Se Won Jang Over a year ago

No, the questioner only put .jumbotron as the selector. This means it has a weighting of 10 only. Sometimes in order to override bootstrap elements, you have to wrap them in a couple of ids or classes to make it more specific.

nouveau Over a year ago

Sounds like a great reason to skip bootstrap.

yuvi Over a year ago

As far as I know bootstrap hardly (if ever) uses anything other than classes in its CSS (specifically for that reason). In any case, his CSS file should overwrite it, specifics or not

omma2289 Over a year ago

Yes, there's no need to add specificity to the selectors to override Bootstrap, just make sure to include the custom CSS file after Bootstrap and use the same selectors they use. In this case the code in the OP should work fine

sheriffderek · Accepted Answer · 2013-10-20 17:33:13Z

0

"I have a file called 'mycss.css' "


<link href="css/my.css" rel="stylesheet" media="screen">

These don't match. That could be the problem.

My answer is probably the real problem, BUT -

@SeWonJang's point it still valid whether it is an ID or a class - and could very well be the issue. If I make: .main-content ul {list-style: none} and then somewhere in .main-content give a class of my-list to a ul - I can't just say .my-list {list-style: disc} --- because I've already been too specific(or overarching) - I've already said: "Apply these rules to ANY ul inside of .main-content." This wins over .my-list {list-style: disc}. Now I have to say .main-content .my-list {list-style:disc} I have really only found this to be a real issue with type. Since almost everything ever is a list of crap - but then in the article text I want some list-style --- That is the best example for me.

edited Oct 20, 2013 at 17:33

answered Oct 20, 2013 at 4:26

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

1 Comment

sheriffderek Over a year ago

Try with something more obvious, body { like background-color: red; } or something. Use an inspector to see what is going on too.

Collectives™ on Stack Overflow

Bootstrap CSS Editing

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related