Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 542
Divey Avatar asked Sep 30 '22 07:09

Divey


1 Answers

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

like image 67
Shawn Taylor Avatar answered Oct 02 '22 22:10

Shawn Taylor