rentox rentox - 4 months ago 9
CSS Question

Bootstrap 3: columns over columns

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>



Answer

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>