Get masonry like layout with Bootstrap 4

Question

I want to create the following layout (see img):

The main thing:

The blocks will "merge" together as in a masonry layout, without margins below
One block double with of the others (or more of that kind of blocks)

I tried it in 2 ways:

With Cards option of bootstrap, but i cannot get it working that one column is double the size of other ones and also deleting the margin.
Putting two images in 1 column, but the problem with this is that the order gets messed up if you make it responsive.

Anyone has experience with getting something like this working?

Use the grid component in bootstrap-4. See [ask] and [mcve]. — Nic3500, Sep 17 '18 at 20:08
But then my layout looks like this: https://i.imgur.com/EfT7l40.jpg I want it without the margins/witespace on the last 2 items. — Jelle, Sep 18 '18 at 12:39
You can do that. **row 1** 4 elements, you did that. **row 2** 2 elements. The right one is just a big rectangle. The left one must be subdivided some more into 2 rows of 2 elements each. You can nest grid elements and have rows within a cell. — Nic3500, Sep 18 '18 at 12:57
i tried that, but then when i make it responsive, the order changes? — Jelle, Sep 18 '18 at 14:26
For responsive, I something similar (not as complex though) and I had to supply many tags to get it to work. Ex. I would put col-md- **and** col- tags, so as the screen reduced in size, it used the smaller values. But at a certain point, the layout will become one column only, regardless how you put it. There is only so much you can put in a small width window. — Nic3500, Sep 18 '18 at 14:30
I don't get it working responsive. I have one div, and two nested divs inside there. And what i want to do in the responsive version, is put one other div, between the two nested divs? This seem impossible? Even with ordering.. See: http://jellekok.com/new/work.php — Jelle, Sep 18 '18 at 16:35

Nic3500 · Answer 1 · 2018-09-19T13:57:05.180

This is how I structured the BootStrap grid to get a layout like yours.

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Grid test</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="grid.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <h1>Grid test</h1>
        </div>
        <div class="row">
            <div class="col">COL1</div>
            <div class="col">COL2</div>
            <div class="col">COL3</div>
            <div class="col">COL4</div>
        </div>
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col">COLa</div>
                    <div class="col">COLb</div>
                </div>
                <div class="row">
                    <div class="col">COLc</div>
                    <div class="col">COLd</div>
                </div>
            </div>
            <div class="col">COL+</div>
        </div>
    </body>
</html>

CSS

body {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h3 {
  margin-top: 2rem;
}

.row {
  margin-bottom: 1rem;
}
.row .row {
  margin-top: 1rem;
  margin-bottom: 0;
}
[class*="col"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

You now have to modify the CSS margins, colors, alignment, ...

I used bootstrap v4.1 I just downloaded
This is based on the bootstrap example http://getbootstrap.com/docs/4.1/examples/grid/
The grid.css posted here is based on this same site.
I tried it in Chrome, and am able to resize the window from the smallest possible width to the largest.

EDIT Here are screen prints of the result:

Full width:

Responsive, just as it starts to stack the divs:

Eventually you get this order, top down:

col1
col2
col3
col4
cola
colb
colc
cold
col+

Thanks, but that doesnt solve that the order will change on responsive version. Check: http://jellekok.com/new/work.php and make the screen less wide (like mobile/tablet). EDIT: i see your code is a little different, let me try — Jelle, Sep 19 '18 at 13:21
yeah that doesnt work in my responsive version with 2 next to each other. Basically the last COL in your example has to go in between two of the COLS above (which are in the same row..) — Jelle, Sep 19 '18 at 13:51
It works up to a point. Then, as the screen gets way small (about 278) it starts to stack them vertical. But that is always the case in responsive, it will make it fit somehow. If you want to enforce the structure, you have to fix to a certain width, not responsive. — Nic3500, Sep 19 '18 at 13:51
I added screen prints to my answer. You want, top down: col1, col2, col3, col4, cola, colb, col+, colc, cold ? The big section on the right to fi between the last two on the left? — Nic3500, Sep 19 '18 at 13:58
The problem is, i dont want "Col +" to be twice as height as the rest. In responsive view, i just want everything the same size. — Jelle, Oct 03 '18 at 15:13

Get masonry like layout with Bootstrap 4

1 Answers1