Reputation: 385
I have 3 cards. What I am trying to say is "at the xs
breakpoint display the 3 cards stacked on top of each other. At the sm
breakpoint make each card take up 1/2 of the available space (two cards on top, one centered below is what I am going for). Finally, at the md
breakpoint, make each card take 1/3 of the available space.
Here is my code (https://codepen.io/ob98/pen/mdVqOJo):
<div class="container">
<div class="row">
<div class="col-xs col-sm-6 col-md-4"> <!-- One -->
<div class="card" >
<div class="card-body">
<h5 class="card-title text-center">Card</h5>
</div>
</div>
</div>
<div class="col-xs col-sm-6 col-md-4"> <!-- Two -->
<div class="card" >
<div class="card-body">
<h5 class="card-title text-center">Card</h5>
</div>
</div>
</div>
<div class="col-xs col-sm-6 offset-sm-3 col-md-4"> <!-- Three. Set offset-sm-3 on this one-->
<div class="card" >
<div class="card-body">
<h5 class="card-title text-center">Card</h5>
</div>
</div>
</div>
</div>
</div>
I set .offset-sm-3
on the last card because if this card takes up 6 columns, I thought this would center it by offsetting by 3 columns on each side.
If you view the codepen you will see the cards stack properly (xs
), then initially expands properly to my col-sm
definition, with the third card centered between the above two. But after this, if you continue to make the screen larger it never moves to the col-md-4
definition and begins to look funky/uncentered.
Note: If I remove '.offset-sm-3'
from the last card, .col-md-4
will take effect when it hits that breakpoint.
Thanks for any help.
Upvotes: 0
Views: 169
Reputation: 2851
You need to set back the offset for md
breakpoint. Add offset-md-0
to the third <div>
which has offset-sm-3
.
<!-- Add offset-md-0 -->
<div class="col-xs col-sm-6 offset-sm-3 col-md-4 offset-md-0">
Upvotes: 1