3

I'm relatively new to bootstrap and doing my best to get up to speed. I understand that rather than edit that 6700 line bootstrap.css file, it makes more sense to create your own css file of changes and put that under the main bootstrap.css file, overriding what was in the main one.

However, I have an issue with media queries. For example, I want the menu to collapse at a larger resolution than what is specified in bootstrap.css, which includes something like this:

@media (min-width: 767px) {
[ lots of things to collapse the menu ]
}

So in my changes css file, I copied the same code, but changed the min-width to 992px. The problem is that this doesn't cancel out the directives made in the bootstrap.css file. It just does them again at a different resolution.

The only thing I can think of to resolve this is to copy that code from the original file, leave the min-width resolution at 767, and then for each instruction through the entire block of code, determine what the default property should be and set it back to that. This would be a ton of work, and could be very prone to mistakes.

My only solution was to edit the main bootstrap.css file and comment out that code. I didn't like editing it, but I don't see any other way around this. IS there another way? I'm not looking for help specifically on collapsing the menu. I'm more looking for css concept help.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Pat T
  • 61
  • 3
  • Conceptually you're correct. If it's not working it's because you haven't properly overridden the Bootstrap CSS. Here's the correct way to override the navbar breakpoint in CSS: http://stackoverflow.com/a/36289507/171456 – Carol Skelly Feb 09 '17 at 12:58
  • Ok, but overriding the bootstrap css can be problematic. It's not necessarily reverting to the default value, (for example) changing "margin: 20px" to "margin: 0", because elsewhere, the margin might have been set to 10px. So you've go to research throughout the entire css file. – Pat T Feb 09 '17 at 13:27
  • It shouldn't by problematic if you're using the correct selectors. You don't have to research the entire CSS file. Use the browser's console to inspect the CSS applied to any given element and you'll know specifically which CSS selector to override. Question like this are out of scope for SO. http://stackoverflow.com/questions/18068397/how-to-customize-bootstrap – Carol Skelly Feb 09 '17 at 13:31

1 Answers1

1

If you really want to override Bootstrap style, you'll have to override also what is specified by Bootstrap CSS file for a width between 767px and 992px.

@media (min-width: 767px) and (max-width: 991px){
    /* Undo here what was specified by Bootstrap file for screens larger than 767px and you don't want to apply */
}
Eria
  • 2,653
  • 6
  • 29
  • 56
  • To clarify, media queries merely specify when particular CSS rules are applied. By creating a new media query, you apply rules to that new range of screen sizes, but you don't modify the rules for screen sizes outside that range (such as those in the original media query's range). You must do both. – isherwood Feb 09 '17 at 13:23