Gonzalo Gonzalo - 5 months ago 49
CSS Question

Bootstrap vertical aligned without breaking the grid

I been trying all the different options that I found to vertically align a grid. Because of the layout that I have none of them worked.

This is what I have to do: for COL-MD and COL-LG the layout should be:

DIV1-IMG DIV2-TEXT
DIV3-TEXT DIV4-IMG


In this case the DIV-TEXT has to be vertically aligned.

For COL-SM and under, the layout should be:

DIV1-IMG
DIV2-TEXT
DIV4-IMG (if it is complicated, we can stick to first show DIV3-TEXT and then DIV-4-IMG)
DIV3-TEXT


The problem is that if I set the div to display:table and its variants, the grid breaks and it doesn't resize to col-xs.

Here I set up the example in case you can see what I am trying to accomplish: http://www.bootply.com/nCIExg8DkM

Any ideas on how one can align the text vertically without breaking the grid?

Thanks!

Answer
  1. Use media queries to reduce the coverage area of your style: @media (min-width: 992px) {}.
  2. Use .col-md-push-6 and .col-md-pull-6 modifier classes to change the order of your columns.
  3. Simplify classes:
    • col-xs-12 col-lg-6 col-md-6 is equal to col-md-6.
    • col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-xs-offset-1 col-xs-10 is equal to col-lg-offset-2 col-lg-8 col-xs-offset-1 col-xs-10.
  4. Use special helpful classes:

Check the result: http://www.bootply.com/WEf5cQlDog

@media (min-width: 992px) {
  .vertical-middle > div {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-offset-1 col-xs-10 col-lg-offset-2 col-lg-8">
      <div class="row vertical-middle">
        <div class="col-md-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 text-center">
          <h2>Title 1</h2>                          
          <p>Text to be centered</p>
        </div>
      </div>
      <div class="row vertical-middle top-buffer">
        <div class="col-md-6 col-md-push-6">
          <img src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" class="center-block img-responsive">
        </div>
        <div class="col-md-6 col-md-pull-6 text-center">
          <h2>Title 2</h2>
          <p>Text to be centered</p>
        </div>
      </div>
    </div>
  </div>
</div>

Comments