Bootstrap 3: columns over columns

Question

is there a way to display a column over a column with a vertical align (align-items: center;) inside a bootstrap grid?

The same that Nesting columns does horizontal but with a vertical align, it would be nice if there is possibility without destroying the bootstrap functionality and use position absolute for the overlay element.

example image

<div class="row row-margin-bottom-100px">
<div class="row">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>

maybe try flex http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — Piotr Kazuś, Jul 28 '16 at 13:58

score 0 · Accepted Answer · edited May 23 '17 at 12:00

Found no other way then using position absolute or via flex

Code with position absolute element:

<div class="row row-margin-bottom-100px">
<div class="row" style="position: absolute; z-index: 5000; width: 100%; top: 50%;">
  <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
  </div>
</div>

<div class="col-lg-6 col-padding-zero wow bounceInUp" >
    <img alt="" src="images/img01.jpg" style="width: 100%">
</div>
<div class="col-lg-6 col-padding-zero wow bounceInRight" >
    <img alt="" src="images/img02.jpg" style="width: 100%">
</div>

Bootstrap 3: columns over columns

1 Answers1