Border On Equal Height Columns With Bootstrap Flex

I am using Bootstrap with a mechanism to give equal column heights. I am trying to give a coloured left and right border to both columns, but Bootstrap is preventing it. I original

Solution 1:

I have simplified the CSS. I'm not sure I understand the problem. There are borders around the boxes. Can you elaborate a little on the issue?

.container-fluid {
   padding-left: 0px;
   padding-right: 0px;
}

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */@mediaonly screen and (min-width : 481px) {
  .flex-row {
    display: flex;
  }
}

#sidebar {
   background: lightgreen;
   border: solid 10px red;
   margin: 0;
}

#main {
   background: pink;
   border: solid 10px red;
   border-left: 0px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divclass="container-fluid"><divclass="row flex-row"><divclass="col-sm-3"id="sidebar"><div><p>menu item</p><p>menu item</p><p>menu item</p></div></div><divclass="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>

Solution 2:

Based on Gerard's comment to his answer, this is the solution that works in a simple template at least. Thank you!

.container-fluid {
   padding-left: 0px;
   padding-right: 0px;
}

#sidebar {
   background: lightgreen;
   border: solid 10px red;
   margin: 0;
}

#main {
   background: pink;
   border: solid 10px red;
}


/* ANYTHING SMALLER THAN Extra Small Devices, Phones */@mediaonly screen and (max-width: 480px) {
   #sidebar {
      margin-left: 15px;
      margin-right: 15px;
   }
   #main {
      margin-left: 15px;
      margin-right: 15px;
      border-top: 0px;
   }
}


/* ANYTHING LARGER THAN Extra Small Devices, Phones */@mediaonly screen and (min-width: 481px) {
   .flex-row {
      display: flex;
   }
   .flex-row>[class*='col-'] {
      display: flex;
      flex-direction: column;
   }
   .flex-row.row:after,
   .flex-row.row:before {
      display: flex;
   }
   #sidebar {
      margin-left: 15px;
      border-right: 0px;
   }
   #main {
      margin-right: 15px;
   }
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><divclass="container-fluid"><divclass="row flex-row"><divclass="col-sm-3"id="sidebar"><div><p>menu item</p><p>menu item</p><p>menu item</p></div></div><divclass="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>