How to expand a column that is inside a container, so that an image could expand from the column middlepoint to the right side of the page?

user_13001731 0
Viewed 73

Within bootstrap container I would like to extend my image to the side but keep the rest the same. To make it more explainable; this is what I have at the moment:Bootstrap container with sidesbar. On the right side of the image there's a gap. I would like to extend the image over that gap (green line) but keep the middle of the column on the same page (red line). Explained in the image: What I would like

But I am having trouble to achieve this with the container. I know I could use container-fluid, but to keep my layout consistant I would like to use container for this matter. Because when I use container-fluid the margins are off and it's not as cleaned lined up as I would like to.

Thanks in advance, I can't seem to figure this out without messing up the layout.

EDIT 1

My bad fogot to add the code; herby my code:

<div class="container">
            <div class="row">
                <section class="col pt-5">
                    <div>
                        <h1>Welkom bij</h1>
                        <h1>XE-Designs</h1>
                        <p>Easy furniture rental with white glove delivery & assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!</p>
                    </div>
                </section>
                    
                <section class="col">
                    <img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg"  />
                </section>
            </div>
        </div>

bootstrap-4 twitter-bootstrap css html
2 Answers

Edit

On your div with row class name you can either use d-flex

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg-secondary">
  <div class="row p-2">
    <section class="col pt-5 border border-white">
      <div>
        <h1>Welkom bij</h1>
        <h1>XE-Designs</h1>
        <p>
          Easy furniture rental with white glove delivery & assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!
        </p>
      </div>
    </section>
    <!-- d-flex and align-items-center is to display flexbox and vertically align child items to center-->
    <section class="col d-flex align-items-center border border-white">
      <!--If you're using latest version of bootstrap use ms-auto and d-block, if not, use ml-auto.
      You have to make your image smaller than your container, if w-100 then it takes width: 100%-->
      <img class="img-fluid w-75 bg-dark d-block h-75 ms-auto" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg"/>
    </section>
  </div>
</div>

user_77555050

Based on this explanation I achieved what I wanted. It's about break the bootstrap container. By reversing the used calculation I knew what attributes to use. I've drawn it out for myself and came to the correct calculation to use. This is the html I used:

<div class="container">
            <div class="row">
                <section class="col-md-6 d-flex align-items-center">
                    <div>
                        <h1>Welkom bij</h1>
                        <h1>XE-Designs</h1>
                        <p>Easy furniture rental with white glove delivery & assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!</p>
                    </div>
                </section>

                <section class="col-md-6">
                    <div class="css_break_out">
                        <img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg" />
                    </div>
                </section>
            </div>
        </div>

For my css I used the following:

.css_break_out {
        width: calc((100% + (100vw - 100%) / 2) + 15px);
        position: relative;
        left: calc(-1 * (100vw - 100%) / 2);
    }

    @@media (min-width: 576px) {
        .css_break_out {
            width: calc((100% + (100vw - 100% - 15px)));
            position: relative;
            left: calc(-1 * (100vw - 100% - 15px) / 2);
        }
    }

    @@media (min-width: 768px) {
        .css_break_out {
            width: calc((100% + (100vw - 200%) / 2) - 15px);
            position: relative;
            left: 0;
        }
    }

If someone has any improvement within these css/ html, let me know, I am willing to edit the answer.

user_130017310
Related