CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tryhan Ternoc
Tryhan Ternoc

Reputation: 21

Change in boostrap from one grid size col to another

Using bootstrap I have this

<div class="col-sm-4">
  <p>something</p>
</div>

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" without any script, just with css?

Also I would prefer to not modify all the variables in bootstrap for this, just for the sake of having as clear and short code as possible.

Sorry for potato English and thanks for your help!

Upvotes: 0

Views: 60

Answers (1)

D.V.D.
D.V.D.

Reputation: 257

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">
  <p>something</p>
</div>

you can find more here about it Bootstrap Grid

Upvotes: 1

Related Questions