Issue
See the below 3 columns of size col-4
I want to add a margin so the borders are not touching, however when I add mx-3
to them the last column overflows onto the next line which is what I don't want to happen.
without margin
with margin (how I want it to look but with all 3 columns on the same row)
I understand the margin adds width to the element - but... Is there an easy solution to stop this happening (i,e keep them all one one row?) with out changing the 'col-4' class?
I've tired setting a gutter on the row (not sure if this is right) but nothing seems to be working.
Code is here.
https://codepen.io/lewis-morris/pen/RwGdwdR
Solution
You can use Offset classes. Visit https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns.
The row classes should be that:
<div class="row justify-content-center">
The columns classes should be that:
<div class="col-md-3 border">
<div class="col-md-3 border offset-md-1">
<div class="col-md-3 border offset-md-1">
Answered By - Emre
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.