Booststrap 4 Grid System , I'm not able to achieve this layout - html

Question

I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try .
<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6 bg-primary" style="height:250px">d</div>
<div class="col-sm-6 bg-info" style="height:500px">d</div>
</div>
<div class="row">
<div class="col-sm-6 bg-info" style="height:250px">z</div>
</div>
</div>
This is what I need to get

Answer 1

The layout is three columns with the center column having 2 rows.
Try this:
<div class="row">
<div class="col-sm bg-success" style="height:500px">d</div>
<div class="col-sm">
<div class="row">
<div class="col-sm-12 bg-primary" style="height:250px">d</div>
</div>
<div class="row">
<div class="col-sm-12 bg-info" style="height:250px">z</div>
</div>
</div>
<div class="col-sm bg-info" style="height:500px">d</div>
</div>

Answer 2

Try this code, Hope it will help you.
<div class="row">
<div class="col-md-3" style="height:100px; background-color:black">d</div>
<div class="col-md-6 ">
<div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
<div class="box mx-auto bg-info" style="height:100px;">b</div>
</div>
<div class="col-md-3 bg-info" style="height:100px">z</div>
</div>
I divided the one row into 3 columns, both side boxes has a size of 3 and mid box have a size of 6 then check the class col-auto-p2 & box mx-auto.

Answer 3

Please try this one with Bootstrap 4
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
<div class="col-md-6">
<div class="row h-100">
<div class="col-12 h-50" style="padding-bottom: 10%;">
<div class="bg-info h-100">
</div>
</div>
<div class="col-12 h-50" style="padding-top: 10%;">
<div class="bg-info h-100">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
</div>
</div>
You can change the padding on inner columns. Don't forget to put row inside a container or container-fluid as described here
https://getbootstrap.com/docs/4.2/layout/grid/
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

Answer 4

Please check the working snippet will help you
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
<div class="row" style="position:relative;height:500px;">
<div class="col-sm-12 bg-primary" style="height:200px">d</div>
<div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
</div>
</div>
<div class="col-sm-4 bg-info" style="height:500px">z</div>
</div>