Vertical and horizontal centering of content in a responsive bootstrap grid

Question

I am working in a bootstrap project where i need some text to be centered vertically with another row. Obviously the two rows are not the same size hence the content size. Is there a way to solve this without escalating to flexbox or is this the way to go? Also i would like to maintain the responsiveness.

Fiddle: http://codepen.io/anon/pen/mPwxXa

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-xs-12">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

[Have you seen this?](http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap) — xyhhx, Mar 30 '16 at 17:54

Nenad Vracar · Accepted Answer · 2016-03-31T12:41:28.007

You can do this with Flexbox and media queries.

As for flexbox you can just use display: flex and align-items: center on parent element and that will be row in this case.

Now you just need to adjust min-width in media queries to be same as bootstrap breakpoints So for example if you are using col-sm-6 bootstrap class, then 768px is break point and you will use @media(min-width: 768px) { } in your media queries.

For col-sm- you can use @media(min-width: 768px) Fiddle
For col-md- you can use @media(min-width: 992px) Fiddle
For col-lg- you can use @media(min-width: 1200px) Fiddle

@media(min-width: 768px) {
  .flex {
    display: flex;
    align-items: center;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-6">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

Instead of Flexbox you can also get vertical-align with CSS Tables and again you have to adjust your queries with bootstrap breakpoints same as for flexbox. With tables you have to remove float from columns with float: none to get vertical-align.

@media(min-width: 768px) {
  .row.display_table {
    display: table;
  }
  
  .col-sm-6.left_cell, .col-sm-6.right_cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
  
  img {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row display_table">
    <div class="col-sm-6 left_cell">
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
    </div>
    <div class="col-sm-6 right_cell text-center">
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
      <p>This is some text some text some more text</p>
    </div>
  </div>
</div>

NiZa · Answer 2 · 2016-03-31T06:43:53.807

I don't want to be too simple, but you are wondering if flexbox is the way to go. Actually, at this time, it is.

The reason behind the text container is that you don't need to use text-align:center; to center your text if you don't want to, but it is still horizontal centered.

body {
  padding: 2em;
}

@media (min-width: 1200px) {
  .vcenter {
    display: flex;
    align-items: center;
  }

  .text {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row vcenter">
    <div class="col-lg-6 col-xs-12 ">
        <img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
    </div>
    <div class="col-lg-6 col-xs-12">
      <div class="text">
        <p>This is some text some te xt some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>
        <p>This is some text some text some more text</p>      
      </div>
    </div>
  </div>
</div>

Interesting solution! Unfortunately `col-xs-12` is never triggered for some reason? — JavaCake, Mar 30 '16 at 21:15
My bad, `flebox` should only be used till the breakpoint of `col-xs-12`. See updated answer. — NiZa, Mar 31 '16 at 06:34

score 0 · Answer 3 · answered Mar 27 '16 at 17:46

0

You could create a div with relative position like:

<div style='position: relative; top: 50%; transform: translateY(50%); height:100%;'>

To encapsulate all the <p> tags and align middle. There are a lot of methods like (http://vanseodesign.com/css/vertical-centering/):

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

but with inline elements didn't work quite well. Note I change the col-lg-6 to col-sm-6, because in codepen you could see the 2 columns.

Extracted from here: https://davidwalsh.name/css-vertical-center

Here a working codepen: http://codepen.io/jpaulet/pen/bpRvyd?editors=1100

Hope it helps!

answered Mar 27 '16 at 17:46

JP. Aulet

4,375
4
26
39

Thanks! But the codepen does not seem to illustrate the result i am looking for. – JavaCake Mar 27 '16 at 17:48
Why not? It works exactly as the image you posted... Note the: "I changed the col-lg-6 to col-sm-6, because in codepen you could see the 2 columns". – JP. Aulet Mar 27 '16 at 17:51
I see this: https://www.dropbox.com/s/5bhn8pytr5qve28/codepen.png?dl=0 .. but let me see it again – JP. Aulet Mar 27 '16 at 17:56
The key problem is that the first column with the image is not the same height as the second one, therefor you cannot use this solution. – JavaCake Mar 27 '16 at 17:58

Vertical and horizontal centering of content in a responsive bootstrap grid

3 Answers3