Bootstrap make neighboring columns overlap

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.