0

I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.

Option 1:

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Option 2:

<div class="row">
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
    <div class="col-lg-4">
    </div>
</div>

Option 3:

<div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
</div>

Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?

P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?

Unbreakable
  • 7,776
  • 24
  • 90
  • 171
  • You can put more than one, to describe the widths you want at the different breakpoints. – Jen Sep 17 '17 at 00:47

3 Answers3

1

These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.

Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.

For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp I found it helpful to get a good understanding.

Kyle Higginson
  • 922
  • 6
  • 11
0

I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.

Samuel Guebo
  • 36
  • 3
0

To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.

For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like 

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-12">column1
    </div>
    <div class="col-lg-4 col-md-6">colmun2
    </div>
    <div class="col-lg-4 col-md-6">column3
    </div>
  </div>
</div>

See this live https://codepen.io/panchroma/pen/EwVwpw

Or you might want to change the relative widths of your 3 columns at different viewports 

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

Or you might want to hide one of the columns at narrower viewports 

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4 hidden-sm hidden-xs">
    </div>
</div>

The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.

Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.

Good luck!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50