Bootstrap make neighboring columns overlap - html

Question

Beneath is some code for a website I am working on.
<div
class="container-fluid px-0">
<!-- row start -->
<div class="row no-gutters align-items-center h-full">
<div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
<div class="masthead__content">
<div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
<h1 class="masthead__title fw-700 text-white js-title">
Title
</h1>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
Subtitle
</p>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow "></span>
</span>
<span class="button-text">Learn More</span>
</button>
</p>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
<div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
<div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
<div class="masthead__img__cover js-image-cover"></div>
</div>
</div>
</div>
<!-- row end -->
</div>
Currently the div columns are situated as shown in the image beneath:
How can I change my bootstrap columns so that the first div actually overlaps the second (desired output shown in screenshot)
I know a resolution to this can be done purely through bootstrap and would greatly appreciate any help with this. I have tried changing the col-lg-x sizes, however, this only changes the width of the columns. I am also unable to find a solution to this online.

Answer 1

While it’s a little difficult to understand what you’re trying to do without an operational version of your code (as #Grumpy was asking), but if all you need is to have part of your left-side column overlap part of your right-side column, then you can do that by using absolution positioning on the left-side column and offsetting the right-side column.
I setup a quick example using some different column sizes for different widths
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-lg">
<div class="row position-relative vh-100">
<div class="col-9 col-sm-8 col-md-7 position-absolute vh-100" style="background-color: rgba(255, 128, 149, 0.5); z-index: 1;">
<p class="Left-right">Left Text</p>
</div>
<div class="col-4 col-sm-5 col-md-6 offset-8 offset-sm-7 offset-md-6 bg-primary vh-100">
<p class="text-right">Right Text</p>
</div>
</div>
</div>
The left-side background-color is setup with an alpha of 50% so you can see the overlap area.
You didn't say which version of Bootstrap you're using, so I used Bootstrap 4.