change in boostrap from one grid size col to another

1131 views html

using bootstrap I have this

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

but i would like it to be a "col-sm-6" when the viewport width is less than say 1200px. is there any way to replace the class"col-sm-4" for the class"col-sm-6"wihtout any script, just wiht css? also I would preffer to not modify all the variables in bootstrap for this, just for the sake of having as clear and short code as posible.

Sorry for potato english and thanks for your help!

answered question

1 Answer


You can't change class with just css but you have 2 options: 1) Media queries:

@media only screen and (max-width: 1200px) {
  //your css here

2) The bootstrap col size classes, each of which reflects different screen width:

<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">

you can find more here about it Bootstrap Grid

posted this

Have an answer?


Please login first before posting an answer.