Utilizing Bootstrap along with a method to ensure equal column heights.
I am attempting to apply colored borders to the left and right sides of both columns, but I'm encountering limitations with Bootstrap. Initially, I had the border set on the inner DIV elements (rather than the col-sm-3/col-sm-9 ones), however, this approach did not work with equal height because it is the column DIV elements that need to be equal in height, not the DIV elements within them.
HTML:
<div class="container-fluid">
<div class="row flex-row">
<div class="col-sm-3" id="sidebar">
<div>
<p>menu item</p>
<p>menu item</p>
<p>menu item</p>
</div>
</div>
<div class="col-sm-9" id="main">
<div>
<p>actual content</p>
<p>actual content</p>
<p>actual content</p>
<p>actual content</p>
<p>actual content</p>
<p>actual content</p>
<p>actual content</p>
</div>
</div>
</div>
</div>
CSS:
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
@media only screen and (min-width : 481px) {
.flex-row.row {
display: flex;
flex-wrap: wrap;
}
.flex-row.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
.flex-row.row > [class*='col-'] > .box {
display: flex;
flex: 1;
}
}
#sidebar {
background: #B3D6B3;
border: solid 10px #D6E9D6;
margin: 0;
}
#main {
background: pink;
border: solid 10px #D6E9D6;
border-left: 0px;
margin: 0;
}
View the JsFiddle example here: https://jsfiddle.net/robertmarkbram/co6hnoc3/
Snippet by Gerard
I have copied the code from Gerard's answer into a basic HTML page and I am not observing the same layout as shown in the snippet view.