locked
Regarding bootstrap css RRS feed

  • Question

  • User264732274 posted

    <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 ?

    thanks

    Monday, August 22, 2016 2:56 PM

Answers

  • User-286291038 posted

    Hi Sudip,

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 22, 2016 4:01 PM
  • User-1142886626 posted

    Hi sudip_inn,

    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:

    http://getbootstrap.com/css/

    Best Regards,

    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 10:59 AM
  • User475983607 posted

    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.

    http://getbootstrap.com/css/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 12:33 PM
  • User1771544211 posted

    Hi sudip_inn,

    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.

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 6:09 AM

All replies

  • User-286291038 posted

    Hi Sudip,

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 22, 2016 4:01 PM
  • User264732274 posted

    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.

    thanks

    Tuesday, August 23, 2016 8:14 AM
  • User-1142886626 posted

    Hi sudip_inn,

    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:

    http://getbootstrap.com/css/

    Best Regards,

    Ailleen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 10:59 AM
  • User264732274 posted

    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?

    why both digit are not same in two class ? please explain in details if possible.

    tell me why two bootstrap class used for single element ?

    thanks

    Tuesday, August 23, 2016 11:19 AM
  • User475983607 posted

    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.

    http://getbootstrap.com/css/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 12:33 PM
  • User264732274 posted

    i know what u said. i like to know why two class col-sm-3 & col-xs-6 has been used for single element ?

    <li class="col-sm-3 col-xs-6"></li>

    Tuesday, August 23, 2016 1:17 PM
  • User1771544211 posted

    Hi sudip_inn,

    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.

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 18, 2016 6:09 AM