* {
box-sizing: border-box;
}
.row-table {
width: 100%;
margin: 0!important;
table-layout: fixed;
}
.row-t {
display: table!important;
}
.row-tr {
display: table-row!important;
}
[class*="col-"] {
display: table-cell!important;
padding-top: 15px;
padding-bottom: 15px;
border: 2px solid red;
float: none!important;
}
.parent {
border: 2px solid #000;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div class="container-fluid">
<div class="row row-table row-t parent">
<div class="col-xs-6 col-sm-4 col-md-3">1</div>
<div class="col-xs-6 col-sm-4 col-md-3">2</div>
<div class="col-xs-6 col-sm-4 col-md-3">3</div>
<div class="col-xs-6 col-sm-4 col-md-3">4</div>
</div>
<br>
<br>
<div class="row-t row-table parent">
<div class="row row-tr">
<div class="col-xs-6 col-sm-4 col-md-3">1</div>
<div class="col-xs-6 col-sm-4 col-md-3">2</div>
<div class="col-xs-6 col-sm-4 col-md-3">3</div>
<div class="col-xs-6 col-sm-4 col-md-3">4</div>
</div>
</div>
</div>Apologies for the slight alteration to this question in order to address an issue that was previously not being replicated.
I am aiming to achieve equal height for my bootstrap columns, mimicking tables and enabling vertical alignment at the center - this is my progress so far.
For a better experience, view these snippets in Full Screen mode - you may notice approximately 1px of whitespace on the left and right borders between the red and black sections. I aim to eliminate this gap, especially in Google Chrome. Any suggestions?
Additionally, please advise which approach would be more suitable for meeting these requirements.
Would the first approach be correct?
Where 'row' has display:table;
.row {
display:table;
margin:0;
width:100%;
table-layout:fixed;
}
.row >[class*="col-"] {
display:table-cell;
float:none;
}
Or perhaps the second approach is more appropriate?
Where 'row' has display:table-row;
.row {
display:table-row;
margin:0;
width:100%;
table-layout:fixed;
}
.row >[class*="col-"] {
display:table-cell;
float:none;
}