Menu
When i write html, i add all classes like
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"></div>
I have seen a lot of tutorials but never seen some one adding all classes to each div.
Is it a good practice to include all classes?
962
Responsive classes Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts.
While Bootstrap 3 provided Skip navigation, Nested headings, and color contrast, Bootstrap 4 has improved the accessibility with its components. Styling and layout from version 4 can be applied to a wide range of markup structures.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Bootstrap has become mobile first since Bootstrap 3. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.
Maybe you have seen a lot of tutorials that don't demonstrate the "cascading" effect of the 4 Bootstrap grid sizes.
There is nothing wrong with adding multiple classes to each div, but you only need to write classes for the smaller of the widths. So for example, sm applies to 768 and greater (it means sm and up):
Using this...
<div class="col-lg-8 col-md-8 col-sm-8"></div>
has the same effect as simply using..
<div class="col-sm-8"></div>
So, you'd only need to use all 4 lg,md,sm and xs together if you want different column sizes on desktop, laptop, tablet and phone. Here's a demo that may help to clarify: http://bootply.com/73778
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
