4

I recently started working with Twitter's Bootstrap.

How can I put a div (#3) next to two other divs (#1 and #2) so that the div on the right is as high/big as the other two divs vertically.

how to get this?

My code so far:

    <div class="row">
    <div class="form-group col-md-8">
        <label for="1">1</label>
        <input type="text" id="1" class="form-control" placeholder="1">
    </div>
    <div class="form-group col-md-8">
        <label for="2">2</label>
        <textarea id="2" class="form-control" rows="10"></textarea>
    </div>
    <div class="col-md-4">
        <img src="http://placehold.it/250x250&text=Map" />
        <input type="text" id="geo" class="form-control" placeholder="3">
    </div>
</div>

I started a fiddle here: http://jsfiddle.net/2cbuL/6/

yumba
  • 1,056
  • 2
  • 16
  • 31
  • Not sure how this interacts with multiple stacked rows, but http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height has a number of interesting answers. If those work, this may be a duplicate. – ssube May 08 '14 at 19:24

2 Answers2

4

Theres a more semantic way of doing this (only posting this as i found this question looking for a solution)

First you need to understand the basics of the grid system then the implementation is pretty simple, just set up two divs next to each other in a row, then but a row with two divs inside one of those divs. Example:

<div class="container">
    <div class="row">
        <div class="col-lg-6">
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                </div>
                <div class="col-lg-12">
                </div>
            </div>
        </div>
    </div>
<div>

producing something like:

layout

Typhomism
  • 284
  • 1
  • 3
  • 13
0

I nested the two divs that are stacked aligned them left with class="pull-left" Updated Fiddle Here

<div class="row">           <div  class="pull-left">
                        <div class="form-group col-md-8 " >
                            <label for="title">Title</label>        
                            <input type="text" id="title" class="form-control" placeholder="Title">
                        </div>

                        <div class="form-group col-md-8">
                            <label for="description">Description</label>
                            <textarea id="description"class="form-control" rows="10"></textarea>
                        </div>
</div>



                        <div class="col-md-4">
                            <img src="http://placehold.it/250x250&text=Map" />
                            <input type="text" id="geo" class="form-control" placeholder="Type in Adress (Google API)">
                        </div>

                    </div>
DivineChef
  • 1,211
  • 1
  • 10
  • 27
  • "so that the div on the right is as high/big as the other two divs vertically" - your answer doesn't meet this requirement. – Timothy Shields May 08 '14 at 19:30
  • Then you will need to set the height of your elements to make them the same height, ie div1 height + div2 height = div3 height or I just updated my fiddle to make less rows in the div#2 check out http://jsfiddle.net/DivineChef/2cbuL/12/ – DivineChef May 08 '14 at 20:49
  • Right now, div3's bottom is not aligned with div2's bottom. How can I achieve this? – yumba May 09 '14 at 08:07