How do I align only one side of a container and container fluid that are stacked on top of each other in bootstrap 5?

Question

I am using bootstrap 5 to create a design where the Navbar is set to container and the hero header piece right below exceeds the space of the container on the right side only.

Here is an image of the design I am trying to achieve:

So far, I am using "container" for the navbar and "container-fluid" for the header piece right below, but I am unsure how to align the text on the left with the logo/container size.

Here is what I have so far:

<div class="container-fluid-md m-0 p-0">
        <div class="row mt-5 m-0 p-0">
            <div class="col-lg-6 m-0">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
              <div class="row">
                <div class="col-sm-12">
                  <button class="btn blue-solid-button btn-sm">Learn more</button>
                  <button class="btn white-solid-button btn-sm">Contact us</button>
                </div>
              </div>
          </div>
          <div class="col-lg-6 m-0 p-0">
            <img class="img-fluid curve-home" src="https://images.unsplash.com/photo-1429041966141-44d228a42775?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
          </div>
        </div>
        
      </div>

My other approach is to set both containers to "container" and use a type of overflow option for the bottom container.

Here is my code for that option:

body {overflow-x:hidden}

.mt-n1 {
    z-index: 3;
    background-image: url(https://images.unsplash.com/photo-1429041966141-44d228a42775?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    position: relative;
}
.mt-n1:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left:80%;
    right:-3000px;
    background-image: url(https://images.unsplash.com/photo-1429041966141-44d228a42775?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
    z-index: -1;
}

<div class="container-lg">
        <div class="row mt-5 m-0 p-0">
            <div class="col-lg-6">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <div class="row">
                <div class="col-sm-12">
                  <button class="btn blue-solid-button btn-sm">Learn more</button>
                  <button class="btn white-solid-button btn-sm">Contact us</button>
                </div>
              </div>
          </div>
          <div class="col-lg-6 m-0 p-0">
            <div class="mt-n1">
              <img class="img-fluid curve-home" src="https://images.unsplash.com/photo-1429041966141-44d228a42775?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="pipelines">
            </div>
          </div>
        </div>
        
      </div>

You'll need to fix the link in the first code block of your question! — Siddharth Bhansali, Jul 22 '21 at 18:33
Hello, I am using an image from online instead of the image I have in my project files to simplify the example. — steph, Jul 22 '21 at 18:44
No I mean the "Here's how to code looks in my browser". That part became a part of the code block instead of a link where we can open your preview. — Siddharth Bhansali, Jul 22 '21 at 19:15
You did take it out, but it's now a block of its own. Can't click. If that doesn't work, could you just maybe put up a jsfiddle? — Siddharth Bhansali, Jul 22 '21 at 19:28
Bootstrap codes don't run here as expected, so I put up a fiddle at https://jsfiddle.net/deathstalkersid/hfetswb3/1/ (make sure to have bottom results view). Looking at that output, could you tell me what are you trying to achieve? — Siddharth Bhansali, Jul 23 '21 at 09:17
The question isn't clear. Is this what you're trying to do? https://stackoverflow.com/questions/42828683/is-it-possible-to-set-a-background-in-a-bootstrap-column-that-oversizes-the-div/42835018#42835018 — Carol Skelly, Jul 23 '21 at 12:04

Digital Leap GmbH · Answer 1 · 2023-08-21T15:32:05.537

To make the right column stretch to the edge of the screen while the left column stays within a specific container size, you can use a combination of Bootstrap's container-fluid class and some custom CSS:

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 offset-custom">
            <h4>this block is going until the edge of the screen</h4>
        </div>
        <div class="col-md-6">
            <h4>this block is pushed inside the container again</h4>
        </div>
    </div>
</div>

In this setup, the container-fluid ensures that the row takes up the full viewport width. The custom class offset-custom will be used to adjust the positioning and width of the right column.

CSS:

/* Define a variable for the container width */
:root {
    --container: 1320px;
}

.offset-custom {
    /* Adjust the left margin for the left column to start its content from a desired position (considering a 12-column grid) */
    margin-left: calc((100% - var(--container)) / 2);
    
    /* Control the maximum width of the left column content */
    max-width: calc(var(--container) / 12 * 6);
}

This should give you the desired effect of having the right column content stretch to the edge of the screen while the left column stays within the confines of a specific container size.

I hope this helps! Let me know if you have any further questions.

How do I align only one side of a container and container fluid that are stacked on top of each other in bootstrap 5?

1 Answers1