How Do I Change Bootstrap Grid When Window Resizes?
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
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!