CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Jim Miller
Jim Miller

Reputation: 3329

Disable ONE of the Twitter Bootstrap responsive layouts in Bootstrap 3.2

Something of a reposting of Disable ONE of the Twitter Bootstrap responsive layouts, but focused on the newly-released Bootstrap 3.2. I'd like to drop the "middle" (768px) layout, such that anything at 768 or below goes into the "collapsed" view. Not surprisingly, the files in the new Bootstrap release have changed relative to 2.x, such that the old instructions no longer pertain. Any advice out there? Thanks!

[meta-issue: My guess was that it was better to post this question as a new issue rather than having the discussion of it buried in comments in the cited "Disable ONE..." post. If that's wrong, we can adjust...]

Upvotes: 0

Views: 148

Answers (2)

jme11
jme11

Reputation: 17407

The way the grid works, there's no customization needed to make "anything at 768 or below [go] into the "collapsed" view."

In Bootstrap 3, the focus is mobile first, so everything by default is 100% the width of the container UP TO the point that you tell it to be different. (Perhaps this was what GuNs was trying to say).

So, if you want everything below 768px to be "collapsed", you don't need to use the xs classes. If you wanted everything below 992px to be collapsed, don't use the sm classes.

EXAMPLE:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
        <p>This content will be in 2 columns above 767px.</p> 
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <p>Below that it will be the full width of the container.</p>
    </div> <!-- /col-sm-6 -->
    <div class="col-md-6">
        <p>This content will be in 2 columns above 991px.</p> 
    </div> <!-- /col-md-6 -->
    <div class="col-md-6">
        <p>Below 992px this will be the full width of the container.</p>
    </div> <!-- /col-md-6 -->
  </div> <!-- /row -->
</div> <!-- /container -->

Upvotes: 2

cvrebert
cvrebert

Reputation: 9289

You'll need to adjust the values of the @screen-* Less variables accordingly. They define the boundaries of the various abstract screen sizes (XS, SM, MD, LG).
The Bootstrap customizer also lets you modify these variables.

Upvotes: 2

Related Questions