mercredi 29 juin 2016

How to properly use Bootstrap 3 grid property

I am using Bootstrap 3 in few of my projects, especially the container-fluid class to make my page to display properly in all devices automatically. I know the following regarding the col-xx class: xs for < 768px, sm for >- 768px, md >= 992px and lg for >= 1200px. Let us say I have the following code:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            Content 1
        </div>
        <div class="col-sm-8">
            Content 2
        </div>
    </div>
</div>

I believe in smart phones both Content 1 and 2 will occupy full screen and In all other devices Content 1 will occupy 4 columns and Content 2 will occupy 8 columns. If so, what is the need for md and lg? Probably I don't understand the concept correctly. Instead, should I use class="col-sm-2 col-md-2 col-lg-2" and class="col-sm-8 col-md-8 col-lg-8" in both the div's so that it will work fine in all devices?

Thanks

Aucun commentaire:

Enregistrer un commentaire