How to scale columns sizes automatically depending on screen size?

Use the Bootstrap Grid to Put Elements Side By Side

So in this example, we hard code col-xs-4 for columns due to the code rendering on a mobile device in the exercise, but as this is responsive how do we ensure it renders to different column sizes depending on the device type? For example, what if we want it to render small columns on a tablet and medium size columns on a 13" laptop device?


You can use multiple classes on an HTML element.

<div class="col-md-3 col-lg-6"></div>

With that you will get 12 columns width between 0 - 767px*, 3 columns width between 768 - 991px,* 6 columns width from 992px and above*.

You get 12 columns from 0 - 767px* because no column class defined for that window size.

*pixel there mean window browser size.

Play around with it using codepen :slight_smile:

That’s exactly what I was looking for! Thank you!