As someone who specializes in backend work, I am currently facing some challenges with a project that utilizes Bootstrap 4.
Our goal is to replicate the layout demonstrated in this link: https://codepen.io/mediumandmessage/pen/xVeXop
(please note that the example and code provided are based on an original Bootstrap 3 design rather than Bootstrap 4)
Here is the HTML structure:
.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, trying to implement this layout in Bootstrap 4 has proven to be challenging. The text ends up displaying horizontally below the image and the divs fail to stack responsively.
I have experimented with different positioning techniques such as absolute and relative, but achieving clean and responsive execution became complex. I am seeking advice or insights from those experienced in pure Bootstrap 4 implementation...
If anyone can offer guidance or expertise on this matter, it would be greatly appreciated!