Last post Oct 18, 2016 06:09 AM by Jean Sun
Aug 22, 2016 02:56 PM|sudip_inn|LINK
<li class="col-sm-3 col-xs-6"></li>
what is the meaning of using two bootstrap css class for single element. tell me why some one would use two class like col-sm-3 and col-xs-6 for li tag ?
Aug 22, 2016 04:01 PM|Nataraj Gandhi Arunachalam|LINK
The sm is targetted for phones and sm for tablet mode. It sets the width the li can span over based on the device (screen size actually) on which we are viewing the page.
Aug 23, 2016 08:14 AM|sudip_inn|LINK
what u said not clear.
two class has been used col-sm-3 col-xs-6 .................why ?
i know sm for tablet and xs for small phone screen but they could use like col-sm-3 col-xs-3 but they use 3 in one class and use 6 in other class why?
why both digit are not same in two class ? please explain in details if possible.
Aug 23, 2016 10:59 AM|Ailleen|LINK
From your description, as we all know xs for small phone screen. Why they use col-xs-6 is relating to the width they want show in the phone screen. The max columns are 12, if more than 12 columns are placed within a single row, each group of extra columns
will, as one unit, wrap onto a new line.
There have more information about Grid system.
You could refer the following link:
Aug 23, 2016 11:19 AM|sudip_inn|LINK
sorry u did not understand my question
two class has been used col-sm-3 col-xs-6 for single element.................why ?
i know sm for tablet and xs for small phone screen but they could use like col-sm-3 and col-xs-3 but they use 3 in one class and use 6 in other class why?
tell me why two bootstrap class used for single element ?
Aug 23, 2016 12:33 PM|mgebhard|LINK
col-sm-3 means the column takes up 12/3 = 4 columns on a small screen and 12/6=2 columns in an extra small screen. This information is openly published on the bootstrap site under the Grid System linked in the previous thread.
Aug 23, 2016 01:17 PM|sudip_inn|LINK
i know what u said. i like to know why two class col-sm-3 & col-xs-6 has been used for single element ?
Oct 18, 2016 06:09 AM|Jean Sun|LINK
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
So when you use col-sm-3 & col-xs-6 for single element, it means that this element has both tablets and phones layout design.