# Multiple sized columns in one row

**URL:** <https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118>\
**Category:** General\
**Created:** [August 11, 2016, 4:19am UTC](https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118 "2016-08-11T04:19:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waseem162](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/waseem162/32/12427_2.png) [@Waseem162](https://forum.freecodecamp.org/u/Waseem162)\
**Post date:** [August 11, 2016, 4:19am UTC](https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118/1 "2016-08-11T04:19:55Z")

</div>

Why to use multiple sized column classes in one div?  
Such as  
div class = "col-sm-x col-md-y col-xs-z " ??  
What is the use of doing this??

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [August 11, 2016, 5:00am UTC](https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118/2 "2016-08-11T05:00:10Z")

</div>

Hi, @Waseem162. We use them to specify how a `<div>` would look like in different screen sizes. For example, `"col-xs-6 col-sm-4"` would make a `<div>` take half of the screen’s width when viewed from a phone, but take a third when viewed from a tablet or larger.

Related reading:

> **[The Bootstrap Grid System Explained](https://forum.freecodecamp.org/t/the-bootstrap-grid-system-explained/24479)**
>
> A nice, detailed explanation of the Bootstrap grid system from Medium: https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc?source=linkShare-8f91301d8667-1470037945

[Grid System - Bootstrap docs](http://getbootstrap.com/css/#grid)

---

<div class="post-metadata">

**Author:** ![Waseem162](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/waseem162/32/12427_2.png) [@Waseem162](https://forum.freecodecamp.org/u/Waseem162)\
**Post date:** [August 11, 2016, 3:25pm UTC](https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118/3 "2016-08-11T15:25:40Z")

</div>

@kevcomedia Thanks pal !! It was really helpful.

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 4:41am UTC](https://forum.freecodecamp.org/t/multiple-sized-columns-in-one-row/27118/4 "2021-01-16T04:41:08Z")

</div>

Closed on January 16, 2021, 4:41am UTC