Border on equal height columns with Bootstrap flex

Question

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 originally had the border on on the inside DIV elements (instead of the col-sm-3/col-sm-9 ones), but this didn't work with equal height since it is the column DIV elements that are equal in height, not DIV elements inside 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;
}

JsFiddle example: https://jsfiddle.net/robertmarkbram/co6hnoc3/

Gerard's Snippet

Copied code from Gerard's answer into a simple HTML page and am not seeing the same thing the snippet view shows.

score 1 · Answer 1 · answered Jul 22 '17 at 18:46

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) */
@media only 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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

That's rather confusing. When I run the snippet, it looks fine. When I run my own code from the JsFiddle in a StackOverflow snippet, it looks fine. But when I pasted it all by itself into a new HTML doc, I see the problem. — Robert Mark Bram, Jul 22 '17 at 19:22
I see what the problem is. Bootstrap applies margin-left: -15px; to the row. It takes the left border away from the screen. Try to overwrite with margin-left: 0; and see if the result improves. — Gerard, Jul 22 '17 at 19:34

score 0 · Accepted Answer · answered Jul 23 '17 at 06:37

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 */

@media only 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 */

@media only 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;
   }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Border on equal height columns with Bootstrap flex

Gerard's Snippet

2 Answers2

Linked