JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12 col-md-12 pull-md-3 bd-content">
<div class="bd-example">
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-start bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex...
CSS
.bd-example {
background-color: #ccc;
}
.p-2 {
background-color: grey;
color: white;
}
body .mb-3 {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
JavaScript
(function($) {
$(document).ready(function() {
$('.mb-3').each(function() {
var style = $(this).attr('style');
$(this).attr('style', style + '; margin-bottom: 0 !important;');
//$(this).css('margin-bottom', '0');
});
});
})(jQuery);