Twitter Bootstrap Question posted in

How to align Bootstrap grids like a masonry layout?-Twitter bootstrap

My grid setup now is as follows:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class='col-md-12 col-sm-12 col-xs-12'>
    <div class='col-md-9 col-sm-9 col-xs-12 text-center'  style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 1
    </div>

    <div class='col-md-3 col-sm-3 col-xs-12'style="height:320px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 2
    </div>

    <div class='col-md-9 col-sm-9 col-xs-12 text-center' style="height:200px;background-color:#0077CC; border-right:2px solid white; border-bottom: 2px solid white">
         DIV 3
    </div>
</div>

My current output is
enter image description here

I want to get rid of the white space between div 1 and div 3. I don’t want to merge div 1 and div3 because in mobile mode div 2 goes below div 3.

My expected outcome is
enter image description here

How can I achieve this in bootstrap?

Tags:

2

Answers


  1. 0

    Its quite simple: below is a demo for the same using bootstrap 4.
    A grid must be wrapped inside a container and a col always inside a row.

    div {
  background: skyblue;
  border: 1px solid blue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class="row">
        <div class="col-12">
          DIV 1
        </div>
        <div class="col-12 d-block d-md-none">
          DIV2 on small
        </div>
        <div class="col-12">
          DIV 3
        </div>
      </div>
    </div>
    <div class="col-md-4 d-none d-md-block">
      DIV 2
    </div>
  </div>
</div>

    Here is a JSFIDDLE link to play around with

    Login or Signup to reply.
  2. 0

    How about this

    <div class="row">
    <div class="col-sm-9">
        <div>
            div 1
        </div>
        <div class="visible-xs">
            div 2
        </div>
        <div>
            div 3
        </div>
    </div>
    <div class="col-sm-3 hidden-xs">
        div 2
    </div>
</div>

    Here’s a JSfiddle https://jsfiddle.net/rutmws7a/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search