Question

I’ve been wondering if there is a way to stop bootstrap from shriking after a certain point. I like the way my website looks 700 px width. so is there a way to stop bootstrap from shirking my html after that point?

Answer 1

I think that, as mentioned in question Twitter bootstrap minimum width in responsive layout, you can set min-width CSS property to 700px for any element you don’t want to be narrower than 700px.

Say you have a div called “wrapper” that wraps all of your page contents:

<div id="wrapper">
    <!-- All contents in here -->
</div>

You can style it like this:

#wrapper {
    min-width: 700px;
}

NOTE: If you are using responsive layout, you will also have to comment the styles you want to be disabled in bootstrap-responsive.css file.

So, when using responsive layout, if you want your site to be displayed 700px wide, you will also have to comment the styles under:

@media (min-width: 768px) and (max-width: 979px) {
@media (min-width: 1200px) {
@media (max-width: 480px) {
@media (max-width: 979px) {
@media (min-width: 980px) {

And leave the CSS rules (but removing the @media and the brackets) of styles under:

@media (max-width: 767px) {

Hope that helps!