Search code examples
bootstrap-grid

Which column classes should be used in Bootstrap to create more resposive Webpage

BootStrap allows four types of classes for column/Grid System. 

.xs // for mobiles
.sm // for tablest
.md // for laptops and normal desktops
.lg // for larger desktop

Suppose i want to create a webpage/website which should be more resposive (definitely it must be) for all type of media. from mobiles to larger desktop. Can i use classes in this formate.
Note: In this example i am going to create left side column.

<div class="left-col col-xs-12 , col-sm-12 col-md-3 col-lg-3">
In above Example , i used col-xs-12 so that when screen is smaller then its width should be 100% , similarly col-sm-12 . and i used col-md-3 so that if screen size is more than 700px(approx) , the column's width should be 25% and similarly with col-lg-3. So again i repeat my Question that should i combined all four classes to make more responsive and dynamic webpages?

Solution

  • The following might be enough to achieve your goal

    <div class="left-col col-sm-12 col-md-3">

    It will use the full width when the device is a tablet or below. And it will use 1/4 of the width when its a laptop or larger desktop pc.