Bootstrap layout on lower resolution

Question

I have the following code:

<div class="row">
   <div class="col-sm-2">
      <input style="width:100%" >
   </div>
</div>

And Fiddle: Sample

On my default resolution: 1920x1080 changing number of columns (col-sm-2) will change a width of the text input. But on 1024x768 the width is always the whole column regardless of col-sm-xx setting. Can someone please explain why it's happening?

Thanks

Answer 1

BootStrap follows a simple rule ie MOBILE FIRST

It means if you just provide col-xs-?? then this gets priority and whatever number is provided here will be provided to all above size screen unless specifically provided.

Similar is the case for col-sm-?? hence it won't affect xs screen but will affect md and lg screens if those are not provided separately.

Therefore, what is happening is its just depicting the property of BootStrap.

CSS priority: xs > sm > md > lg

That is why it is advised while writing CSS

Put media query for larger screens not for mobile screen.

Hope it answers your question.

Answer 2

The bootstrap grid system is broken down into 12 columns.

12 columns represent the entire page.

The Bootstrap grid system has four classes, depending on your device size

• xs: This is used for smartphones
• sm: This is used for tablets
• md: This is used for desktops
• lg: This is used for larger desktops

It's important to note that every class scales up. For example, to use the same width for both smartphones and tablets, you would simply need a col-xs-xx class

In your case, col-sm-2 represents two out of the 12 columns on a screen. In other words, it will always take up one sixth of the screen.

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Resource

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp