CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dynelight
Dynelight

Reputation: 2162

Making Twitter Bootstrap fixed width below 1024px

I need to make it so Twitter Bootstrap doesn't go on responsive mode when I hit a resolution below 1024px. In other words, I want the horizontal sidebar to show up and not touch my rows or columns.

I have some conditionals with higher resolutions that I manage to achieve using the online LESS compiler, so I assume this can be done.

Which flag will I have to modify in order to do this?

Upvotes: 0

Views: 855

Answers (3)

Kate S
Kate S

Reputation: 318

Probably posting much too late, but I was also attempting to do the same thing. If you follow these instructions via Bootstrap you will have a layout that stops being responsive below 1024px.

Upvotes: 1

Stickers
Stickers

Reputation: 78686

This will help to avoid responsiveness on smart phones and tablets. 

<meta name="viewport" content="width=1024">

Also remove initial-scale=1and other values.

Add a container for everything, and set a min-width. 

<style>
  .page-container {
    min-width: 1024px;
  }
</style>

<body>
  <div class="page-container">
    ...
  </div>
</body>

Upvotes: 2

joshhunt
joshhunt

Reputation: 5335

The Bootstrap docs have a guide for disabling responsiveness.

  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. 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.

Upvotes: 0

Related Questions