0

I am trying to get the columns to take up the remaining space instead of waiting for the end of column. Is the best approach to use to two divs at col-lg-6 and and set the divs inside at col-lg-12? just want to make sure i am using bootstrap the correct way and get rid of any bad habits early on. it will be easier to show in pictures

my current view enter image description here

expected result enter image description here

Bish25
  • 606
  • 1
  • 10
  • 35
  • 2
    Only way to do that is with a jQuery pluging called **Isotope** (or **masonery**).
    I prefer Isotope > http://isotope.metafizzy.co/layout-modes/fitcolumns.html     – Roy Bogado Apr 13 '17 at 10:00
  • Possible duplicate of [Make bootstrap columns take up the least vertical space](http://stackoverflow.com/questions/32272964/make-bootstrap-columns-take-up-the-least-vertical-space) – Abhitalks Apr 13 '17 at 10:12
  • Seems that you need Masonry grid. I found one article about that [article.](https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/) – stojkosd Apr 13 '17 at 10:04

1 Answers1

1
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-6" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:140px;">
        </div>
      </div>
    </div>
    <div class="col-md-6" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:150px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>
Deepak Kumar
  • 221
  • 3
  • 17