How to use vertical align in bootstrap

Question

Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

Some CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

The solution provided in: **[http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3][1]** works great! [1]: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Max Stern, Jun 16 '14 at 22:32

score 70 · Accepted Answer · edited Jul 28 '14 at 05:22

70

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed prevents breaking the functionality of the col-* classes.

edited Jul 28 '14 at 05:22

Chris Moschini

36,764
19
160
190

answered Oct 03 '13 at 08:40

magirtopcu

1,194
10
25

2

**table-layout:fixed**! That was the property I forgot to add. Without it, the table automatic layout will override the element width set by Bootstrap. Thanks for the reminder. – SPArcheon Feb 18 '14 at 14:30
10

I had to add `float: none` to `.child`. Else `display` was considered as `block` no matter what (instead of `table-cell`). Weird, because every one seems happy with the proposed solution. I'm using Bootstrap 3.3.5, nothing fancy. – philippe_b Jul 13 '15 at 18:09
@philippe_b Had to do this as well. `float: center` implies `display: block` and I guess it took precedence over `display: table-cell`. – maryisdead Jul 07 '16 at 02:12
Also had to add a `float: none` to `.child` to make it work. Great job, btw. The only one that worked out for me after multiple highly-voted answers. – George Mar 11 '17 at 19:06

prinsen · Answer 2 · 2017-05-10T13:24:47.017

42

Maybe an old topic but if someone needs further help with this do the following for example (this puts the text in middle line of image if it has larger height then the text).

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

The important thing that I missed out on was "float: none;" since it got float left from bootstrap col attributes.

Cheers!

edited May 10 '17 at 13:24

answered Jan 02 '15 at 14:19

prinsen

955
8
7

6

Thanks but using this example I see that column stacking stops working – jmontenegro Mar 23 '15 at 17:56
but this solution is not responsive – Dynamic May 05 '17 at 09:25

score 8 · Answer 3 · edited May 09 '17 at 12:11

8

For the parent: display: table;

For the child: display: table-cell;

Then add vertical-align: middle;

I can make a fiddle but home time now, yay!

OK here is the lovely fiddle: http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

edited May 09 '17 at 12:11

moritzg

4,266
3
37
62

answered Aug 12 '13 at 17:01

lharby

3,057
5
24
56

the question is about bootstrap grid views. How to include table , table-cell method without breaking bootstrap grid operations. – magirtopcu Sep 21 '13 at 08:08

southz rgw · Answer 4 · 2016-02-29T16:08:43.800

6

I had to add width: 100%; to display table to fix some strange bahavior in IE and FF, when i used this example. IE and FF had some problems displaying the col-md-* tags at the right width

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}

edited Feb 29 '16 at 16:08

answered Apr 30 '15 at 17:54

southz rgw

353
4
13

What example are you referring to here when you say "when i used this example." – Kmeixner Apr 30 '15 at 18:22
Oh sorry, i wasn't able to add a comment to the reffered example... here my full code: .display-table { display: table; table-layout: fixed; width: 100%; } .display-cell { display: table-cell; vertical-align: middle; float: none; } – southz rgw May 07 '15 at 22:46

score 2 · Answer 5 · answered Jul 28 '14 at 05:54

http://jsfiddle.net/b9chris/zN39r/

HTML:

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS:

div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
}

Important notes:

The vertical-align: middle; display: table-cell; must be applied to a tag that has no Bootstrap classes applied; it cannot be a col-*, a row, etc.
This can't be done without this extra, possibly pointless tag in your HTML, unfortunately.
The backgrounds are unnecessary - they're just there for demo purposes. So, you don't need to apply any special rules to the row or col-* tags.
It is important to notice the inner tag does not stretch to 100% of the width of its parent; in our scenario this didn't matter but it may to you. If it does, you end up with something closer to some of the other answers here:

http://jsfiddle.net/b9chris/zN39r/1/

CSS:

div.item div {
    background: #fdd;
    table-layout: fixed;
    display: table;
}
div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;
}

Notice the added table-layout and display properties on the col-* tags. This must be applied to the tag(s) that have col-* applied; it won't help on other tags.

score 1 · Answer 6 · answered Mar 20 '17 at 06:06

Prinsen's answer is the best choice. But, to fix the issue where the columns don't collapse his code needs to be surrounded by a media check statement. This way these styles are only applied when the larger columns are active. Here is the updated complete answer.

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

@media (min-width: 768px){
   .display-table{
       display: table;
       table-layout: fixed;
   }

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}

score -1 · Answer 7 · edited Aug 12 '13 at 17:02

-1

You mean you want 1b and 1b to be side by side?

 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>

edited Aug 12 '13 at 17:02

daniel__

11,633
15
64
91

answered Aug 12 '13 at 16:38

srakl

2,565
2
21
32

that would be horizontal not vertical align – alias51 Aug 12 '13 at 16:39
1

but it is vertically align already? is it not? 1a is already above 1b – srakl Aug 12 '13 at 16:40
2

vertical align, so it is in the middle of the parent div with equal spacing above and below – alias51 Aug 12 '13 at 16:50

score -3 · Answer 8 · answered Oct 18 '16 at 20:58

-3

With Bootstrap 4, you can do it much more easily: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

answered Oct 18 '16 at 20:58

Avishai

4,512
4
41
67

How to use vertical align in bootstrap

8 Answers8

Linked

Related