I’m having trouble getting this layout to work like I want. I’m trying to create rows with a half width image and a text overlay box that partially covers the image. I have their first row working, but the second row with the negative margins isn’t working like I want. everything is off to the left. I’m trying to have the content more to the center like the first row. I’m trying to use BS5 for as much of this as possible.
here is a codepn
It’s because you didn’t revert the left margin on your image right. It was still applying the margin-left: -150px from the previous selector.
.image-right .contentColumn{
margin-right:-150px;
margin-left: 0;
}
With some simplification of your html, you can use the nth-of-type selectors and get the same effect:
.row:nth-of-type(even) .contentColumn { margin-right:-150px; }
.row:nth-of-type(odd) .contentColumn { margin-left:-150px; }
I would recommend using Grid layout for this sort of thing. It’s a much more reliable way to get the results you want. Here’s a basic introduction to layering elements with Grid.
Bootstrap (which is what the OP is using) uses flex for layout. It was built before grid was common place, and they’ve kept with the “if it ain’t broke, don’t fix it” motif
Ah, right. So the OP just needs to click the button in BS that says “Make all your dreams come true”. 
thanks. that did it!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.