Linesofcode Linesofcode - 3 months ago 9
CSS Question

Bootstrap div column height change other div's locations

I'm facing a layout issue with the use of

<div class="col-md-X">
of bootstrap. By placing large amount of content inside the div it forces the others div's to another location.

This is my html layout:

<div class="row">
<div class="col-md-7 content"></div>
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-7 content"></div>
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-7 content"></div>
</div>


Which basically creates something like:

| col-md-7 | | col-md-4 |
| col-md-7 | | col-md-4 |
| col-md-7 | |


However when I place large amount of content inside, for example, the second
col-md-4
it forces the last
col-md-7
to go down.

| col-md-7 | | col-md-4 |
| col-md-7 | | col-md-4 |
| | | content
| | | content
| | | content
| col-md-7 | |


Like the image illustrate

enter image description here

The problem can be seen in JSFiddle.

I would like the final result to be:

| col-md-7 | | col-md-4 |
| col-md-7 | | col-md-4 |
| col-md-7 | | content
| | | content
| | | content

Answer

i have change html

like

<div class="col-md-7">
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 1:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 2:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 3:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 4:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 5:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 6:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 7:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 8:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 9:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 10:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 12:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>

            </div>
        </div>

        <div class="col-md-4 col-md-offset-1">
            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 13:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 14:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 15:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 16:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>

            <div class="content">
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 17:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 18:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 19:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 20:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 21:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 22:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 23:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 24:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 25:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="row form-group">
                    <span class="col-md-3 text-right paddingtop_5px">Input 26:</span>
                    <div class="col-md-8">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
        </div>

https://jsfiddle.net/e8ve0wy2/1/