How to launch col-sm bootstrap class at screen size 768px?

Question

At the screen size of 768px, the bootstrap class col-md is implemented. Is there a way to change this so that the class col-sm is implemented at this screen size instead?

These are the current defaults:

Extra Small (<576px) .col-
Small (>= 576px) .col-sm-
Medium (>=768px) .col-med-
Large (>=992px) .col-lg-
Extra Large (>=1200px) .col-xl-

https://stackoverflow.com/questions/47747208/bootstrap-4-change-breakpoints — CBroe, May 25 '22 at 12:57

score 1 · Accepted Answer · answered May 25 '22 at 15:23

1

I think this is make sense

the code:

@media (min-width: 576px) {
  .col-sm {
    flex: 0 0 100% !important;
    margin-bottom: 10px !important;
  }
}

@media (min-width: 768px) {
  .col-sm {
    flex: 1 0 0% !important;
  }
}

but why you want to change the col-sm use col-md instead

answered May 25 '22 at 15:23

LoaiMasri

36
3

Thanks so much! I had a few components bound to col-md that I didn't want to change at the screen sizes between 768px and 992px. – Tanielle May 26 '22 at 09:48

How to launch col-sm bootstrap class at screen size 768px?

1 Answers1