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: 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 = 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..

    Cannot figure out how to center multiple links in a navigation bar using CSS

    How to create flexible div items that break after the line?

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How to insert / edit / group css rules faster?

    How to center image while also aligning text to the right of image?

    jQuery UI how to avoid submit button getting css classes?

    How to Make the Content 100% height and equal height columns in this layout?

    Google Share button not showing properly if originaly hidden

    How do I change properties of text that's being imported via php

    how to create a pricetag like border around list items

    how to add space at top of page

    How to override external css marked as !important? [closed]

    How to use css to style xhtml markup made only of divs like a table [closed]

    How to change the position of image in search box in css?

    how can I make my navbar scroll smoothly to the top on page click

    How does the resizing api on the App Engine Imagine API work?

    How to get CSS hover menus to stay on top

    How do you center align inline elements inside an html div?

    CSS - how to set up header images as use eg. Facebook?

    How to set background texture to 50% of the page in css

    How to remove Width and Height values of an Image with css?

    How to crop image with css

    How to style object when the user clicks it

    How to modify the orientation of a
      spanning multiple columns?

    How can I create custom tooltips with css pseudoelements

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to style LI to show quotes in a ticker

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to have multiple borders on div using css