What are the difference between col-, col-sm-, col-md-, col-lg-, col-xl-? Explain it with the help of an example.

0 votes
101 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What are the difference between col-, col-sm-, col-md-, col-lg-, col-xl-?  Explain it with the help of an example.

1 Answer

0 votes
Ravi Vishwakarma answered 10-Aug-2021 by Ravi Vishwakarma

There are five classes used in Bootstrap Grid System.

  1.  .col-  (any device) 
  2.  .col-xs (for phones)
  3.  .col-sm (for tablets)
  4.  .col-md (for desktops)
  5.  .col-lg (for larger desktops)
  6. .col-xl ( for extra large device )

Grid System

 Extra-small <576px Small ≥576px  Medium ≥768px  Large ≥992px Extra large ≥1200px
Max container width  None (auto)  540px  720px  960px  1140px
Class prefix  .col-  .col-sm-  .col-md-  .col-lg-  .col-xl-

 .col  

If we use the .col class in bootstrap it will always create in the column grid.

<div class='container'>

  <div class='row text-white'>
    <div class='col bg-primary'>.col</div>
    <div class='col bg-secondary'>.col</div>
    <div class='col bg-primary'>.col</div>
  </div>
</div>

 .col-sm-

If we use the .col-sm class in bootstrap. then window width size is ≥576px then it converts in the column and if the width is less than <576 then it converts in the row.

<div class='container'>
  <div class='row text-white'>
    <div class='col-sm bg-primary'>.col</div>
    <div class='col-sm bg-secondary'>.col</div>
    <div class='col-sm bg-primary'>.col</div>
  </div>
</div>

 .col-md-

If we use the .col-md class in bootstrap. then window width size is ≥768px then it converts in the column and if the width is less than <768px then it converts in the row.

<div class='container'>

  <div class='row text-white'>
    <div class='col-md bg-primary'>.col</div>
    <div class='col-md bg-secondary'>.col</div>
    <div class='col-md bg-primary'>.col</div>
  </div>
</div>

 .col-lg-

If we use the .col-lg class in bootstrap. then window width size is ≥992px then it converts in the column and if the width is less than <992px then it converts in the row.

<div class='container'>

  <div class='row text-white'>
    <div class='col-lg bg-primary'>.col</div>
    <div class='col-lg bg-secondary'>.col</div>
    <div class='col-lg bg-primary'>.col</div>
  </div>
</div>

 .col-xl-

If we use the .col-xl class in bootstrap. then window width size is ≥1200px then it converts in the column and if the width is less than <1200px then it converts in the row.

<div class='container'>

  <div class='row text-white'>
    <div class='col-xl bg-primary'>.col</div>
    <div class='col-xl bg-secondary'>.col</div>
    <div class='col-xl bg-primary'>.col</div>
  </div>
</div>