[RESOLVED]Using col-sm & col-xs without specifying the senario for the large screen

I have the following code inside a web template that i am using :-

</div>
<div class="row panel">
<div class="col-sm-3 hidden-xs">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-12 col-sm-8">
@RenderBody()
</div>
</div>

but now i got confused on how the two divs will display in a full screen (large screen), as i understand the markup as follow:-

- the Menu will be hidden on X-small screens and occupy 3 columns on small size,, but what about large screens ?

- the RenderBoy will occupy 12 in x-small screens and 8 in small but what about large screens ?

Can anyone advice ?

Thanks

if you look at the break points in the documentation for Bootstrap it shows that the classes "cascade" up so if you only set the col-sm-8 it is also then col-md-8 and col-lg-8 without specifying it.

http://getbootstrap.com/css/

hope it helps

Hi john,

First, please refer to remojr76’s reply

Secondly, base on http://getbootstrap.com/css/#grid, it says that:

•Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Best Regards

Starain Chen

Leave a Reply