Creating Bottom Border on Bootstrap 3 Grid Columns w/ Gutter - css

Question

I have been trying to set up a grid using bootstrap 3 where all the columns will have the same height even with different content sizes - which I have accomplished using flexbox. But now I am trying to add a solid border to the bottom of each item in the grid and I just can't get it to work (I want a border on the bottom, with a gutter between grid elements).
I can do it easily on the top like: https://codepen.io/Wafflenaut/pen/dvzWzb
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-top:5px solid; border-top-color:#df5400;">
But when I try it on the buttom I get a result like: http://codepen.io/Wafflenaut/pen/perPWL
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
If I try it directly on the column divs I get a solid bar. So - I basically need to either get a gutter functioning between columns or to get a nested div to go full height. I’ve tried a number of solutions (various padding tricks, vh, etc.), which tend to either not work or to break responsiveness.
And the kicker - this is within a CMS which I lack any access to the css or js files - so everything I do has to be workable inline from within a section of the html body.
Any suggestions for avenues of attack?

Answer 1

You can add display: flex to the div with class="col-xs-12 col-sm-4"
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 2</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 4</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 5</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
</div>
</div>

Answer 2

Apply a height of 100% to each of the inline styles.
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">