twitter bootstrap 4 - equal height to columns bootstrap4 -
i using bootstrap 4 , wanted know how leave columns of same height ? if possible without using flexbox compatible older browser ( bah !).
thank you
here if want use flexbox
the css
.row.is-flex { display: flex; flex-wrap: wrap; } .row.is-flex > [class*='col-'] { display: flex; flex-direction: column; } /* * , max cross-browser enabled. * nobody should ever write hand. * use preprocesser autoprefixing. */ .row.is-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row.is-flex > [class*='col-'] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
the html
<div class="row is-flex"> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> </div>
source (https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height)
Comments
Post a Comment