Dinis Figueira
Dinis Figueira

Reputation: 57

Stop Bootstrap under a minimum width

So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.

What ideas could I use to achieve this?

Upvotes: 1

Views: 487

Answers (3)

brian17han
brian17han

Reputation: 1279

You can use your own customized Bootstrap css (create one here) instead of the original/regular one. In the 'Media queries breakpoints' section, just change @screen-xs, @screen-sm, and @screen-md to 1024px and then download the customized version.

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362430

This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:

For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

https://www.codeply.com/go/g1dEHU6EOX

Upvotes: 1

TidyDev
TidyDev

Reputation: 3668

Bootstrap is designed to be mobile first and scale up rather than down.

You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.

Upvotes: 1

Related Questions