How Do I Change Bootstrap Grid When Window Resizes?

Question

In my website, I have a box that's not sizing like I want.

<div class=" col-md-12">...</div>
I get too few padding than I want while the windows is monitor-screens.
The padding's fine when in phone-screens.

<div class=" col-md-10 col-md-offset-1">...</div>
It's fine padding in monitor-screens but too small with the phone-screens.
Why is this happening?

And how can I make it work on both?

Answer 1

Have you even read the documentation of Bootstrap?

http://getbootstrap.com/css/#grid

Bootstrap is designed for this, however, you need to tell your classes it. MD stands for medium device ... you also have sm which is the phone. So if you want 10 colums on a phone, make your class as followed.

<div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>

if this isn't getting you there (the sm range is between 991 pixels till 768px), use the XS class.

<div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>

That influences the devices with a resolution of 767 pixels or less.

So to come back to your question: are they combineable? Yes, they are

The combination sets you can make you can make up from 1 class to.. i dont know how many, because bootstrap will select the class it needs depending on the size of the screen. So you can add also classes to it how it should behave on large screens (col-lg) to supersmall (col-xs). I refer you further to the documentation with examples on the bootstrap website.

Happy HTML'ing!

Answer 2

.col-md-12 with no other classes is full width at all viewport sizes. To make the padding and margin work correctly, you need a .row around it so that the padding of the column class is adjusted by the surrounding .row (with negative L and R margin) and then outside of that you need either the .container or .container-fluid class to prevent the horizontal scrollbars.

HOWEVER, if this "Big Rectangle" is full width all the time, as it is with .col-md-12, you absolutely do not need to use any grid classes. If you want it contained within the max-width of your .container, put it directly inside the .container without surrounding grid classes, or you can put it in a .container-fluid to just get the left and right 15px (default padding) or put it inside nothing (leave it all by itself) and it will hit the edges of your viewport without any padding/gutter.

If you don't use any grid classes you can make your rectangle a percentage width with max-width (if you desire) and put the class .center-block