How to add vertical spacing between flexbox wrapped items in bootstrap4? - html

Question

In bootstrap 4 I have the following code:
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-md-flex col-md-12 flex-wrap">
<div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
<div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
<div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
<div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
<div style="width:100px;height:50px;float:left;display:block;background:red;">Div</div>
</div>
</div>
</div>
Issue I have is as soon as there is a 'wrapped item', it appears to get stuck to the bottom of the items above. When I try to apply a margin-bottom:5px to each of the divs, it appears to have no effect. What is the correct way to handle this?

Answer 1

A few things in your code...
why use float with flex? Bootstrap 4 uses flex instead of float (which was used by bootstrap 3)
the divs in pink are from your code with classes removed to show the effect in the browser/snippet
the divs in blue show the solution with flex (using bootstrap 4 classes)
margin-bottom works in both
working snippet below:
.flex-wrap>div {
width: 100px;
height: 50px;
display: block;
}
.my-divs {
float: left;
margin-bottom: 10px;
background: lightpink;
}
.my-flex-div {
background: lightblue;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row no-gutter">
<div class=" d-md-flex col-md-12 flex-wrap">
<div class="my-divs">Div</div>
<div class="my-divs">Div</div>
<div class="my-divs">Div</div>
<div class="my-divs">Div</div>
<div class="my-divs">Div</div>
</div>
<hr/>
<div class="d-flex flex-wrap">
<div class="my-flex-div">Div 2</div>
<div class="my-flex-div">Div 2</div>
<div class="my-flex-div">Div 2</div>
<div class="my-flex-div">Div 2</div>
<div class="my-flex-div">Div 2</div>
</div>
</div>
</div>

Answer 2

It is most likely your use of float that is causing the problem. However this whole layout can be achieved using only Bootstrap default classes and no additional CSS.
First, there is no need for a row/col layout if you are only using a col-12 full-width single column. Simply remove the row no-gutter and col-12 classes.
Second, BS4 includes utility classes for margin. Read about them here.
Try the example below. I have used multiple background colors for clarity.
.flex-wrap div {
width: 100px;
height: 50px;
}
<div class="container-fluid">
<div class="d-flex flex-wrap">
<div class="mb-5 bg-primary">Div</div>
<div class="mb-5 bg-secondary">Div</div>
<div class="mb-5 bg-warning">Div</div>
<div class="mb-5 bg-success">Div</div>
<div class="mb-5 bg-danger">Div</div>
</div>
</div>
Here is a working codepen example.