layout divs in bootstrap [duplicate] - html

Question

This question already has answers here:
bootstrap grid uneven columns
(4 answers)
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 4 years ago.
I am using bootstrap for my web application.I want my divs to be displayed as below:
my html is as follows:
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<!-content-->
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
But the output displayed is as follows:
How can i change the html so that it can be displayed in the required format

Answer 1

To achieve that you should right row column inside column try this
<div class="container border border-primary">
<div class="row border border-primary">
<div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
<div class="row border border-secondary">
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 1-->
</div>
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 2-->
</div>
</div>
</div>
<div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
<!-content for 3-->
</div>
</div>

Answer 2

You need to check that your col's add up to 12, looks like some of your responsive selectors such as col-md-12 were causing the issue. Here's a working demo:
.col-4, .col-8 > .row{border: 3px solid black; padding: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-8">
<div class="row">
<!--content-->
col-8
</div>
<div class="row">
<!--content-->
col-8
</div>
</div>
<div class="col-4">
<div class="row">
col-4
</div>
</div>
</div>
Please refer to the Bootstrap docs on Grid System for more info

Answer 3

div {
border: 1px solid #3d3d3d;
padding: 5px;
}
// Dont consider this css
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">col-md-12</div>
<div class="col-md-12">col-md-12</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>