CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gamer
Gamer

Reputation: 311

How to make a masonry layout grid in bootstrap 3?

I am using boostrap to make a masonry layout. But I am having a problem. As you can see in my code, I have 5 divs. I want Div 4 and 5 to move up(check the attached image) but I have no idea how to do it. I can do it with margin-top but it will break the responsive layout. So, what's the possible solution for this? I am a newbie, it will be a great help. Thanks in advance.

<html>
<head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <style>
        .div1{
            border: 2px solid;
        }
        .div2{
            border: 2px solid;
        }
        .div3{
            border: 2px solid;
            height: 100px;
        }
        .div4{
            border: 2px solid;
        }
        .div5{
            border: 2px solid;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="col-md-12">
        <div class="col-md-4 div1">Div1</div>
        <div class="col-md-4 div2">Div2</div>
        <div class="col-md-4 div3">Div3</div>
        <div class="col-md-8 div4">Div4</div>
        <div class="col-md-8 div5">Div5</div>
    </div>
<!-- Loading minified js. jQuery and Bootstrap -->
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

The current layout is: enter image description here

But I want it like this: enter image description here

Upvotes: 3

Views: 3705

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362430

In this specific case you can use nesting..

<div class="col-md-12">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6 div1">Div1</div>
                <div class="col-md-6 div2">Div2</div>
                <div class="col-md-12 div4">Div4</div>
                <div class="col-md-12 div5">Div5</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12 div3">Div3</div>
            </div>
        </div>
    </div>
</div>

Or, use pull-right on div3...

<div class="col-md-12">
   <div class="row">
    <div class="col-md-4 div1">Div1</div>
    <div class="col-md-4 div2">Div2</div>
    <div class="col-md-4 div3 pull-right">Div3</div>
    <div class="col-md-8 div4">Div4</div>
    <div class="col-md-8 div5">Div5</div>
    </div>
</div>

Demo of both solutions

If you want to use Masonry, see my answer for Bootstrap Masonry solutions.

Upvotes: 3

Dalin Huang
Dalin Huang

Reputation: 11342

you can do it this way:

// external js: masonry.pkgd.js

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <style>
    .div1{
            border: 2px solid;
          height: 40px;
        }
        .div2{
            border: 2px solid;
          height: 40px;
        }
        .div3{
            border: 2px solid;
            height: 100px;
        }
        .div4{
            border: 2px solid;
          height: 40px;
        }
        .div5{
            border: 2px solid;
            height: 40px;
        }
  </style>
</head>

<body>
  <div class="col-md-12">
    <div class="container-fluid">
      <!-- add extra container element for Masonry -->
      <div class="grid">
        <div class="grid-sizer col-xs-4"></div>
        <div class="grid-item col-xs-4 div1"></div>
        <div class="grid-item col-xs-4 div2"></div>
        <div class="grid-item col-xs-4 div3"></div>
        <div class="grid-item col-xs-8 div4"></div>
        <div class="grid-item col-xs-8 div5"></div>
      </div>
    </div>
  </div>

  <!-- Loading minified js. jQuery and Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 2

Joe Lissner
Joe Lissner

Reputation: 2472

It wouldn't be masonry, per say, but from your image what you want is

<div class='row'>
    <div class='col-md-8'>
        <div class='row'>
            <div class='col-md-6 div1'>Div1</div>
            <div class='col-md-6 div2'>Div2</div>
            <div class='col-md-12 div4'>Div4</div>
            <div class='col-md-12 div5'>Div5</div>
        </div>
    </div>
    <div class='col-md-4 div3'>Div3</div>
</div>

Upvotes: 3

Related Questions