Bootstrap 4 custom grid

Question

How to perform the following grid using Bootstrap 4?

I want one column to be from the edge of the window to the inside and the other one as half as standard .container?

Answer 1

You should use fluid-container, not container because two of your columns exceeds the container. But column can not do so in Bootstrap.

If fluid-container is too big, restrict its width with custom CSS.

.row div {
  border: 1px solid #000;
}

.h-200px {
  height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">
    </div>
  </div>
  <div class="row">
    <div class="col-6 bg-success h-200px  ">

    </div>
    <div class="col-3 offset-3 mr-auto ml-0 bg-primary h-200px  ">

    </div>
  </div>
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">
    </div>
  </div>
  <div class="row">
    <div class="col-3 offset-3 ml-auto mr-0 bg-success h-200px  ">

    </div>
    <div class="col-6 bg-primary h-200px  ">

    </div>
  </div>
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">

    </div>
  </div>
</div>

Check CodePen