How to make not equal boxes as a layout with bootstrap 4?

Question

I would like to ask how to make the layout you can see below with bootstrap grid system and also semantic html. Can I use semantic tags inside divs and how to make section 4 upper than 3?

the code i think of:

<div class="container">
    <div class"row justify-content-between">
        <section class="col-5">
            1
        </section>
        <section class="col-5">
            2
        </section>
    </div>
    <div class"row justify-content-between">
        <section class="col-5">
            3
        </section>
        <section class="col-5" style="margin-top: -50px;">
            4
        </section>
    </div>
</div>

the age old pure css masonry question - not possible with your current html structure - how would your second row second column know how much to go back upwards and out of it's row div? — Pete, Mar 21 '19 at 10:07

Rence · Accepted Answer · 2019-03-21T10:15:03.780

If the order of the boxes in the html is not relevant to you, you can simply split the divs in two col-6 columns.

<div class="container">
  <div class="row">
    <div class="col-6">
        <section class="col-12">
          1
        </section>
        <section class="col-12">
          3
        </section >
    </div>
    <div class="col-6">
       <section class="col-12">
          2
        </section>
        <section class="col-12">
          4
        </section>
    </div>
  </div>
</div>

Example:

/* css just for visualization, not relevant */

.row {
  background: #f8f9fa;
  margin-top: 20px;
  padding: 10px;
}

.box {
  border: 2px solid black;
  margin-bottom: 10px;
}

.height-1 {
  height: 200px;
}

.height-2 {
  height: 150px;
}

.height-3 {
  height: 125px;
}

.height-4 {
  height: 100px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-6">
        <section class="col-12 box height-1">
          1
        </section>
        <section class="col-12 box height-3">
          3
        </section>
    </div>
    <div class="col-6">
       <section class="col-12 box height-2">
          2
        </section>
        <section class="col-12 box height-4">
          4
        </section>
    </div>
  </div>
</div>

yeah you are right ,this shape requires 2 column – ADH - THE TECHIE GUY Mar 21 '19 at 10:14 — ADH - THE TECHIE GUY, Mar 21 '19 at 10:14

Ram_UI · Answer 2 · 2019-03-21T10:32:13.360

Try like this with minimal amount of code. If u want you can adjust the height of the each section.

section {height:100px;margin-bottom:6px;}
  .pl12 {padding-left:12px;}
  .sec4-height{80px !important;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row justify-content-between">
        <section class="col-5 border">
            1
        </section>
        <section class="col-5">
          <section class="border h-50 pl12">
              2
          </section>
          <section class="border sec4-height pl12">
              4
          </section>
        </section>
        
    </div>
    <div class="row justify-content-between">
        <section class="col-5 border">
            3
        </section>
        
    </div>
</div>

How to make not equal boxes as a layout with bootstrap 4?

2 Answers2