Customize Bootstrap Breakpoints

HTML & CSS
1

Hi there,

I’m trying to add custom classes to Bootstrap’s breakpoints.
For instance:
@media (min-width: 992px)
.container {
background-color: darkgray;
}

@media (min-width: 768px)
.container {
background-color: aliceblue;
}

When I open the page, though, my background-color are not there.
What am I doing wrong?

Thanks for any help.

3

The media queries are not complete(*), but anyway they are probably overridden by Bootstrap. To test if that is the case, try make your declarations !important;. N.B. only as a test to find out if the rules work.

Then, whether you tested or not, use your browser’s inspect tool to see what rule is overriding so you can find how to apply the background color change.

Please post what you find.

(*) They are lacking the @-rule’s curly brackets:

@media screen and (min-width:982px){
    .container {
	background-color: darkgray;
    }
}
1 Like
4

Thank you, Eirk_J!

I totally missed the brackets.
Now it works better, but there is still something odd.

The second media query works fine, so I see the aliceblue color, but the first media query doesn’t.

This is how it appears in the inspector:
https://s23.postimg.org/bvetq6ugr/Clipboard01.jpg

I can force it with the !important rule, but you said to use !important only for the test, though.

Thanks for helping!

Best,
Andrew

1 Like
5

That is because the Cascading nature of CSS. The first rule is overridden by the later coming second rule.

Try switch them so the 982px rule overrides the 768px rule, because the narrower rule is also valid at 982px.

2 Likes
6

Bingo!

Which is why I should start from the smallest device then move to the bigger resolutions :slight_smile:

Thank you so much, Erik!
This has been very helpful.

Best,
Andrew

7

That’s true only when you have min-values, max-values would be the opposite.

1 Like
8

Awesome, thanks for the tip! :smiley:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.