Mark Mark - 5 months ago 14
CSS Question

Bootstrap layout on lower resolution

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

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.