Bootstrap div column height change other div's locations

Question

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

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

There is a nice way to do it with Jquery. Let me know if you are open for jquery solution — Rajshekar Reddy, Aug 30 '16 at 13:54

score 1 · Answer 1 · answered Aug 30 '16 at 13:51

Try to create the following layout

<row>
 <col-md-7>
   <row>
     <col-md-12></col-md-12>
   </row>
   <row>
     <col-md-12></col-md-12>
   </row>
 </col-md-7>
 <col-md-4>
   <row>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
   </row>
  </col-md-4>
</row>

score 0 · Answer 2 · answered Aug 30 '16 at 13:49

0

This is because you are exceeding the maximum size of the row. Each div->row must be at maximum 12 cols (col-md-7 + col-md-4 + col-md-1 = 12 cols).

Your code must be something like this:

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

answered Aug 30 '16 at 13:49

Marcel Kohls

1,650
16
24

The issue is with the height, the column height pushes the next div downwards and it looks awkward on the UI. – Rajshekar Reddy Aug 30 '16 at 13:53

score 0 · Accepted Answer · answered Aug 30 '16 at 13:51

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/

score 0 · Answer 4 · answered Aug 30 '16 at 14:00

0

You could match divs to be the same size as the biggest one:

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

answered Aug 30 '16 at 14:00

Vcasso

1,328
1
8
14

Bootstrap div column height change other div's locations

4 Answers4