CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4bootstrap-grid
Justin
Justin

Reputation: 385

Having trouble with offset-sm (Bootstrap 4)

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

Answers (1)

yinsweet
yinsweet

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

Related Questions