Vertically align a row from bootstrap inside a div width issue - css

Question

Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?

Answer 1

By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}