Twitter bootstrap grid: is it possible to simulate smaller screen by adding class to container?

Question

Does Twitter Bootstrap 3 provide a built-in way to "simulate" a smaller screen by adding a css class to grid container?

My use case is that I want to display an section of html using bootstrap's grid normally on a large screen, but I want to reuse the same snippet for displaying in a modal (which is much narrower). For example, say I have this html:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12">One</div>
        <div class="col-md-6 col-sm-12">Two</div>
    </div>
</div>

Is there a built-in class I can add to the .container element (like .simulate-sm) to force the columns to display using the sm grid definition, even if it's on md screen? The html above is just an example: my real-world html has a large number of rows and more varied column combinations, which makes me hesitant to try to massage the column classes individually.

Thanks for your help!

Answer 1

There is nothing built in, but with the right CSS (including descendant classes), you can make a single added custom class do all the work for you. In your specific example, you would add .simulate-sm to the .modal-body div like so:

<div class="modal-body simulate-sm">      
    <div class="col-md-6 col-sm-12">One</div>
....

and some custom CSS:

.simulate-sm .col-sm-12{width:100%}
.simulate-sm .col-sm-8{width:75%}
.simulate-sm .col-sm-6{width:50%}
.simulate-sm .col-sm-4{width:25%} /* extrapolate as needed */

Do this for whatever column classes you've used in your original code, doing the basic math to figure out % width. (i.e. the same as Bootstrap's).

The combination of descendant specificity and using this on the modal-body means it ONLY overrides Bootstrap's styling when within a modal (to which you've added the .simulate-* class).

Here is an example: http://www.bootply.com/KhNbrdUzoE