How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

Question

With BootStrap, the most problem I've been having with it, is the concept of using width values. BootStrap has col-sm-3 (values from 3 to 12, values of sm , md , lg ) on any element, most prominently used on spans and divs elements. BootStrap also has a set pre-defined @media-queries that gives the responsive look on a mobile device depending on width sizes.

I notice that sometimes when I use a fixed width value on a div , span , or any element involved with the grid system, it will not scale down because of the overrided width. And sometimes when I do assign a width value, it will scale down as the browser window resizes.

Now, I want to know and understand, how can I fully utilize and control the width value on different width sizes of the browser so I can choose what elements are to be resized/scaled or to stay the same until the remaining space has been taken up?

Here's an image example of what I mean:

Browser Window: 884 x 992 (value in pixels)

As you can see above, the browser window size is 884px x 992px and the elements are perfectly aligned. Now, when I resize it slightly smaller (less than 992px) between the width of 770px - 985px, it looks like the image below, when given the amount of space left, the label tags should not append and the input text fields should not scale down (as seen in the image below). If someone had a device in between those width sizes, it would not look right. So, I want to occupy, not append, that space which hasn't been filled.

Browser Window: 884 x 985 (value in pixels)

NOTE: I'm not sure which to even use because so many things are using the width value and I want know the right, efficient way of going about the width in Bootstrap, whether that is media queries, col-xx-x , some specific element css editing or something else. I want to understand once and for all!

Here's the bootply to demonstrate: http://www.bootply.com/jXPUMYCxaU Resize browser window to about the size of the tablet and you will see what I mean. I, simply want it to look right, as the other resized widths are okay and consistent!

Answer 1

I'll try to explain the Bootstrap grid structure which I think will help you understand the problem.

.col-xx-yy

col = column selector

xx (xs, sm, md, lg) = screen width where the column width applies, xs < 768px, sm ≥ 768px, md ≥ 992px, lg ≥1200px. More info

yy (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) = 12/yy is the width in percentage of the column. For example 12 would be 12/12 = width: 100%, 6 would be 6/12 = width: 50%, 3 would be 3/12 = width: 25%;

So in your example you have used col-sm-3 which means on any screen width ≥ 768px it will have a width of 25%. (And screen width < 768px it will be 100%). So what is happening is that your outside container is changing width from 970px to 750px so your columns are also changing width to be 25% of that.

So some possible solutions:

1. Add a new column class to your form, for example change it to "col-sm-6 col-md-3" which means it will be width: 50% on screen width ≥ 768px and width: 25% on screen width ≥ 992px.
2. Use custom css to set the width so that it isn't based on a percentage (not recommended)

Hopefully this makes sense, let me know if you have any questions.

Answer 2

In essence, I would recommend trying to stick with the col-* structures and fiddling with them to get the right result. Once you get a handle on that, if you need specific structures at specific/differing widths for the different browser window sizes, you'll need to use your own @media queries...but in any case, to just put an HTML example to what you can do to control your form layout to prevent the problem you are showing in the screenshots, you could do this:

<form class='form-horizontal'>
  <div class='form-group'>
    <label class='control-label col-xs-12 col-sm-6, col-md-4'>Label Text</label>
    <div class='col-xs-12 col-sm-6 col-md-8'>
        <input class='form-control' />
    </div>
  </div>
</form>

• On mobile, labels will stack on top of inputs so they have full-width
• On tablet, the label will get a full half of the grid for extra space
• On regular and large screens, the label will only take up 1/3 of the space