Can we override the BOOTSTRAP using media queries from CSS File?

1) I used a Bootstrap to build a page
2) I used the following media query in the CSS FILE to override the bootstrap.

@media screen and (min-width: 500px){
body {color: #ccc;}
}

It doesn’t change the body color after the break point.
a) Can we override the Bootstrap using media query(from CSS File)?
b) Any idea what could have gone wrong here ?

Yes, you can override the bootstrap with your css. Just include css on the page after bootstrap.css file. Also, double check if your media query is doing what it is intended to do.

Create a custom css file. Write your css. link the css file to your html just under the bootstrap css file

Solution:

Just add !important after the color code, and you’re good to go.

The Code:

Like this:

@media screen and (min-width: 500px){
  body {
        color: #ccc !important;
       }
}

Explanation:

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document