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 ?
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.
hope it helps
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.