2

I am using bootstrap for my web application.I want my divs to be displayed as below:

required layout

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:

current output

How can i change the html so that it can be displayed in the required format

Gautham M
  • 4,816
  • 3
  • 15
  • 37

3 Answers3

4

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>

Gautham M
  • 4,816
  • 3
  • 15
  • 37
vidy
  • 1,572
  • 6
  • 24
  • 43
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

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
1

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>
Atul Bhalerao
  • 56
  • 9
  • Nice, maybe consider changing the `col-md-x` to `col-x` so that when OP runs the code snippet they can see a non-stacked example in their browser – Nick Parsons Nov 29 '18 at 10:41