Bootstrap column borders

by ischenkodv

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">

  <h1>
  Bootstrap columns with borders
  </h1>

  <div class="row row-relative">
    <div class="col-sm-4">
    <div class="col-column-padding">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan nisl est, sed finibus massa vestibulum et. Donec congue placerat volutpat. Nullam et lorem sodales arcu commodo convallis et vel diam. Phasellus ut porta tortor, eu sollicitudin nulla. Proin eget nisi blandit, euismod ipsum eget, malesuada mi. Fusce eleifend maximus quam ac cursus. Morbi malesuada blandit risus eget interdum. Sed sit amet dolor suscipit, laoreet nunc quis, viverra est.
    </div>
    </div>
  
    <div class="col-sm-4 col-border">
    <div class="col-column-padding">
    Duis at semper dui, quis sagittis mi. Nullam molestie, dolor vel sodales hendrerit, sem sapien viverra turpis, non facilisis nulla velit venenatis magna. Phasellus eu maximus nulla. Suspendisse eget sem id lacus euismod facilisis id at diam. Proin consequat efficitur mollis. Sed ornare massa eget viverra interdum. Suspendisse et turpis at justo finibus interdum tincidunt a magna. Fusce quis arcu et massa iaculis consectetur. Integer ipsum arcu, congue non leo et, maximus molestie felis. In maximus luctus nunc, non euismod dui ultricies eu. Nunc eu turpis in elit pellentesque placerat. Quisque interdum interdum felis in rutrum. Vestibulum pharetra massa ac felis finibus, nec porttitor risus scelerisque. Integer non ante sapien.
    </div>
    </div>
    <div class="col-sm-4 col-border">
    <div class="col-column-padding">
    Vivamus pellentesque felis non facilisis tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vitae ligula augue. In odio dui, tincidunt eu condimentum quis, commodo at est. Duis tempus dui at vestibulum fermentum. Pellentesque diam mauris, luctus vestibulum neque...

CSS

@media (min-width: 768px) {
  
  .row-relative { position: relative; }
  
  .col-column-padding { padding-left: 15px; }
  
  .col-border {
    position: static;
    padding-left: 0;
  }
  .col-border:before {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    border: 1px solid #eee;
  }
}