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


Tags: html,css,twitter-bootstrap,twitter-bootstrap-3,media-queries

Problem :

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) Browser Window 884 x 992

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) Browser Window 884 x 985

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!



Solution :

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.


    CSS Howto..

    How do I center align the items in my menu?

    How to change or call svg clippath polygon attributes in CSS

    How to make triangle shape in before a div in pure css?

    How to ignore

    CSS rules in wordpress theme?

    CSS: How to place next to each other 2 images with 50 % width?

    How to add left margin and wrap long lines in code tag

    how to define variable in less

    How to remove the text from this html

    ckeditor - how to get custom-css with id to work?

    How to hide last divider in list of comments using CSS?

    How to fade between classes in a conditional query

    how to add a CSS class inside a JavaScript setup code?

    Font-awesome not properly displaying on Firefox / how to vend via CDN?

    How do I add another css to Bootstrap?

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    What is .htc file ?How it works in Internet explorer

    How to expand sidebars sub-menu to the correct size?

    How to force Google's custom search to be responsive?

    CSS hover - parents are affected, too. How to avoid this?

    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”

    How to keep div visible when hovering another div

    How to use top middle and center inside a div

    how to make the images always in center

    CSS. How to add small image on background?

    LESS: How to specify current tag with nesting?

    How to remove the border that show after clicking a picture

    How can I display social media icons in a horizontal line instead of vertical row

    How to set height of child div while hovering over a parent div in css?

    How to save game information PHP/HTML/CSS/JS [closed]

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?