CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Muhammed Bhikha
Muhammed Bhikha

Reputation: 4999

bootstrap 3.0.0 switch off responsive whilst being able to use the grid system

This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.

When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.

Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?

Upvotes: 0

Views: 613

Answers (3)

Bass Jobsen
Bass Jobsen

Reputation: 49054

As mentioned by @tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive. If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:

If using navbars, remove all navbar collapsing and expanding behavior.

In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3

Upvotes: 0

Tim Bartsch
Tim Bartsch

Reputation: 918

Did you try the new grid options? Especially .col-xs-* should help you.

Here is a little example from the docs.

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46579

You can use the media query @media handheld which is, theoretically, used only by handheld devies (phones and tablets).

See http://www.w3.org/TR/CSS2/media.html

If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.

Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?

Upvotes: 0

Related Questions