1

Fairly new to Bootstrap, attempting to convert an existing page into bootstrap tags.

My question relates to grids. On this page http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/ it says that you only need to use the class for the smallest device width you want to support.

So, if I want to support mobile devices, tablets, medium sized screen and large screens, I only need to type col-sm-xx?

If I set a div to 

<div class="col-sm-6">...</div>

I understand that this will take up half the screen size, but will it do the same when col-md-xx and col-lg-xx breakpoint is hit?

And if so why bother having those md and lg classes?

P.S.
  • 15,970
  • 14
  • 62
  • 86
andrewb
  • 2,995
  • 7
  • 54
  • 95
  • Possible duplicate of [Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap](https://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap) – BenM Sep 28 '17 at 21:25

3 Answers3

0

The element with col-6 class will take a half of screen, it doesn't matter, on mobile or on desktop: on every screen. And Bootstrap provides custom breakpoints, so you can write the class like col-sm-6, and this rule will be applied only for small devices. Look at the custom Bootstrap's breakpoints and resolutions:

enter image description here

This option was created to allow developers to change their grid in every breakpoint.

P.S.
  • 15,970
  • 14
  • 62
  • 86
0

The answer is yes. But, additionally, you'd use md or lg breakpoints depending on how you want to show the grid. Example, let say you have 3 columns that is big enough to be seen on both the tablet (maybe iPad) and desktop Like three photos. But then it wouldn't make sense to show three columns on mobile phone, which should adjust 1 photo on a column. So you'd tell Bootstrap to to show a grid col-md-4 on each photo but col-sm-12.

<div class="row">
 <div class="col-xs-12 col-md-4">photo here</div>
 <div class="col-xs-12 col-md-4">photo here</div>
 <div class="col-xs-12 col-md-4">photo here</div>
</div>
mythoslife
  • 203
  • 1
  • 6
  • 20
0

I will answer your question based on your example; before doing so, it has to be noted that by default a div element has a width of 100% or in case of the bootstrap classes, is equal to all col-XX-12 classes, each one at its responsive tier.

When using the col-sm-6 on its own and based on the the way the bootstrap grid system works, here is what happens:

a) Since there is no col-xs-XX class, the width of the column will default to a normal div's, aka 100% b) Starting from the sm resolution tier - 768px and above - the column would be 6/12 or 50% of the parent width. c) If there are no other classes for higher resolution tiers, then the 50% width will pass on to all resolutions upwards.

To answer your question, why you should need the rest of the classes used for higher resolution tiers, eg 'col-md-6' or 'col-lg-6'.. you don't, UNLESS of course you want to change the column width to a different width at those resolution tiers.

Moreover, you can also skip classes of intermediate resolution tiers, if the column width remains the same for those resolutions, eg. if you require a column to have a 50% width from 768px and up to 1199px and then have the column consume 66% you would use classes col-sm-6 col-lg-9 skipping the intermediate col-md-6 since the value is carried on from the small resolution tier.

As a sidenote, the breakpoints I am referring to are from Bootstrap 3 - are changed for Bootstrap 4 - however, usage remains the same.

scooterlord
  • 15,124
  • 11
  • 49
  • 68