Bootstrap layout with nested rows and columns

Question

How would I achieve this layout with Bootstrap?

Box1 and Box2 should be stacked on the left and content Box3 should fill the remaining columns (width) and height of Box# should be equal to the total height of Box1 and Box2 (in other words I guess! height of Box3 should be equal to the row height...)

I am not sure what am I missing to get the layout!

My code:

.small-box {
  background-color: gray;
  border: 1px solid black;
 }

.content-box {
  background-color: lightgreen;
  border: 1px solid black;
 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
     <div class="row">
      <div class="col-md-4 small-box">
        <div class="row col-md-12">
          <div class="col-md-12">
           <h1>box1</h1>
          </div>
          
          <div class="col-md-12">
           <h1>box2</h1>
          </div>
          
        </div>
      </div>
   
    <div class="col-md-8 content-box">
      <h1>box3</h1>
    </div>
  </div>
</div>

CSS

.small-box {
  background-color: gray;
  border: 1px solid black;
 }

.content-box {
  background-color: lightgreen;
  border: 1px solid black;
 }

codepen

2:

Thomas5631 · Accepted Answer · 2017-10-01 20:16:43Z

1

I think the small-box class is applied to the wrong element.

In order to apply it to each left hand container, you should move it down a level like:

<div class="col-md-4">
  <div class = "row small-box">
    <h1>box1</h1>
  </div>
  <div class = "row small-box">
    <h1>box2</h1>
  </div>
</div>

To get the height of the left side to match the content box, you can set it in the css:

.small-box {
  background-color: gray;
  border: 1px solid black;
  height: 50%;
}

Here is a forked version of the codepen.

answered Oct 1, 2017 at 20:16

Thomas5631

2441 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

4ukh Over a year ago

it worked for me but when i apply 5px margins to all boxes the layout completely distorted... any help

Thomas5631 Over a year ago

@4ukh If your aim is to add white space between the elements, then you can add another div inside the small-box and main-content areas. You can apply the margin there and the layout will remain as you expect.

Md Ashiqur Rahman · Accepted Answer · 2017-10-01 20:14:10Z

1

You have to fix height for box1 and box2. Generally, bootstrap row takes height based on the element of inside. If you fix height your layout will work as you want. Use different background-color for each box it will help you to understand.

answered Oct 1, 2017 at 20:14

Md Ashiqur Rahman

4641 gold badge5 silver badges19 bronze badges

Comments

TidyDev · Accepted Answer · 2017-10-01 20:16:58Z

I think this is what you're looking for.

CSS

.small-box {
  background-color: gray;
  border: 1px solid black;
}

.small-inner-box{
    background-color: red;
    margin: 10px 0px 20px 0px;
    height:300px;
}

.content-box {
  background-color: lightgreen;
  border: 1px solid black;
}

HTML

<div class="container">
  <div class="row">
      <div class="col-md-4 small-box">
        <div class="row col-md-12 small-inner-box">

           <h1>box1</h1>
        </div>

        <div class="row col-md-12 small-inner-box">
           <h1>box2</h1>
          </div>

      </div>

    <div class="col-md-8 content-box">
      <h1>content (box3)</h1>
      <p></p>
    </div>
  </div>
</div>

I think it's important to think about the box model and how each one of the div's fit into each other.

Collectives™ on Stack Overflow

Bootstrap layout with nested rows and columns

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related