How to disable bootstrap but only below certain width of the viewport?

Question

I'm using bootstrap on my website. On one specific page I have this annoying rule in CSS:

@media (min-width: 576px)
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

On this page I want to enable bootstrap from 707px, not from 576px. We want to use a different layout for width equal and below 707px, so I want to disable bootstrap. I added two classes to the div element:

col-sm-4 is obviously responsible for bootstrap and websites-column will be used for further styling

I'm trying to disable bootstrap using this code, but it doesn't even show up in the inspector

@media (max-width: 707px) {
.col-sm-4.websites-column {
    flex: initial !important;
    max-width: 100% !important;
    }
}

The file is placed in the head section below bootstrap link too, so it's supposed to work.

I wonder what did I mess up in the code. Any hints on how to disable bootstrap but only below certain width of the viewport?

user_3121189 · Answer

With Bootstrap you'll find it creates various classes to cover the most common responsive breakpoints. You shouldn't try to override classes like this as this would likely result in issues later on.

If you write your HTML conforming to Bootstraps media classes, you can avoid needing to create any override classes.

Using .col-12, we are saying, by default, the width should be 100%. When we reach our medium breakpoint, change this so we are using 25% width instead.

If you need to customise Bootstrap's media queries, you will need to download the raw source code using a tool like npm or yarn and modify the variables bootstrap provides rather than using a CDN.

Is there also a reason you are using Bootstrap 4? Version 5 is available and has extensive documentation to work from to customise your code.

How to disable bootstrap but only below certain width of the viewport?

1 Answers