CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SteveDavies
SteveDavies

Reputation: 29

Bootstrap 3 - Having a column the height of 2 rows

I am trying to do a layout where a column is the height of two rows. I can't seem to as the correct question to find previous answers.

I am using Bootstrap 3.

Here is the code

<div class="container">
    <div style="margin:100px">
        <!---spacer-->
    </div>

    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12" id="top-row"></div>
    <div>

    <div class="col-lg-8 col-md-8 col-sm-12" id="bottom-row"></div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm 12" id="quote-2-high"></div>
    </div>
</div>

<div style="margin:100px">
    <!---spacer-->
</div>

</div> <!-- extra closing div ? -->

And some CSS

#top-row {
  background-color: lime;
  height: 250px;
}

#bottom-row {
  background-color: pink;
  height: 250px;
}

#quote-2-high {
  background-color: aqua;
  height: 500px;
}

I have a codepen here if it is of any use. http://codepen.io/steeth/pen/gPVwMK?editors=1100

As you can see the blue column starts at the top of the red, but I want to to start at the top of the green.

Upvotes: 0

Views: 4443

Answers (2)

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8">
            <div class="row" id="top-row"></div>
            <div class="row" id="bottom-row"></div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
    </div>
</div>

The Bootstrap Grid System it is a very simple concept, but I recommend you to use this tool, it will help you so much: http://shoelace.io/

how to add column

Upvotes: 2

Clemens Himmer
Clemens Himmer

Reputation: 1342

UPADATE: Using this markup the blue box will stay as one box instead of two seperating one. The pink box gets move up for 250px and so is under the green box.

<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12" id="top-row"></div>
    <div class="col-lg-4 col-md-4 col-sm 12" id="quote-2-high"></div>        
    <div class="col-lg-8 col-md-8 col-sm-12" id="bottom-row"></div>
</div>

#bottom-row {
  background-color: pink;
  margin-top: -250px;
  height: 250px;
}

You need to use a completly different markup.

In each row there is place for columns with the summed up with of 12, so you go ahead and place a 8 and 4 in the first row and another 8 and 4 in the second row.

<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12" id="top-row"></div>
    <div class="col-lg-4 col-md-4 col-sm 12" id="quote-2-high"></div>
</div>
<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12" id="bottom-row"></div>
    <div class="col-lg-4 col-md-4 col-sm 12" id="quote-2-high"></div>
</div>

Remove the double height on your blue element and you're done:

#top-row {
  background-color: lime;
  height: 250px;
}

#bottom-row {
  background-color: pink;
  height: 250px;
}

#quote-2-high {
  background-color: aqua;
  height: 250px;
}

Demo: Codepen

Upvotes: 1

Related Questions