CODEWITHSUNDEEP
cssbootstrap-4responsive-design
hcexile
hcexile

Reputation: 446

Bootstrap 4 How to Overlap Two Divs that Stack Responsively

I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4.

Simply put, we want to create the layout that's executed here: https://codepen.io/mediumandmessage/pen/xVeXop

(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)

HTML:

.somesection {margin-top:50px!important;}
body {
  font-size:17px;
  font-family:Helvetica Neue;
}
img {max-width:100%;}

.overlay-text {
  font-size:3.5vw;
  float:right;
  width:65%; /*important*/
  bottom:21vw; /*important*/
  padding: 25px;
  background:#f7f7f7;
}
<div class="container somesection">
  <div class="row col-xs-6">  
     <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
  </div>
  <div class="col-xs-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
  </div>
</div>

However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.

I've tried screwing around with absolute and relative positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...

If anyone out there can share any expertise here, I'd greatly appreciate it!

Upvotes: 2

Views: 7446

Answers (2)

Pete
Pete

Reputation: 58432

You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).

Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more

.overlay-text {
  /* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
  align-self: flex-start;
  transform: translateX(-20%);

  /* the following are for example only */
  background-color: #ffffff;
  padding:20px;
}

<div class="container somesection">
  <div class="row">
    <div class="col col-sm-6">
      <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&amp;auto=compress&amp;dpr=1&amp;crop=entropy&amp;fit=crop&amp;w=1087&amp;h=725&amp;q=80" class="w-100">
    </div>
    <div class="col col-sm-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
    </div>
  </div>
</div>

Example bootply

Upvotes: 2

Charlene Vas
Charlene Vas

Reputation: 731

Just add position:relative; to the .overlay-text You can also adjust the value of bottom 

.somesection {margin-top:50px!important;}
body {
  font-size:17px;
  font-family:Helvetica Neue;
}
img {max-width:100%;}

.overlay-text {
  font-size:3.5vw;
  float:right;
  width:65%; /*important*/
  bottom:21vw; /*important*/
  padding: 25px;
  background:#f7f7f7;
  position:relative;
}
<div class="container somesection">
  <div class="row col-xs-6">  
     <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
  </div>
  <div class="col-xs-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
  </div>
</div>

Upvotes: 0

Related Questions