Is there a way to align just one side of a stacked container and container-fluid in Bootstrap 5?

I am currently working on a design project using Bootstrap 5 where the navbar is contained and the hero header section below extends beyond the container's boundaries only on the right side.

Below is an image depicting the design I am aiming for:

https://i.sstatic.net/giFXi.jpg

At the moment, I have utilized "container" for the navbar and "container-fluid" for the header section below. However, I am facing difficulty aligning the text on the left with the logo/container size.

Here is a snippet of what I have achieved 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>

Another method I am considering is setting both containers to "container" and utilizing an overflow option for the bottom container. Below is the code snippet for this approach:

body {overflow-x:hidden}

.mt-n1 {
    z-index: 3;
   ...
}
<div class="container-lg">
        <div class="row mt-5 m-0 p-0">
            <div class="col-lg-6">
            <h1>Lorem Ipsum</h1>
            <p>...
        </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>
cssbootstrap-5

Answer №1

To achieve a layout where the right column extends to the edge of the screen while the left column remains within a defined container size, a combination of Bootstrap's container-fluid class and custom CSS can be utilized:

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 offset-custom">
            <h4>this section reaches the screen edge</h4>
        </div>
        <div class="col-md-6">
            <h4>this content is contained within a specific size</h4>
        </div>
    </div>
</div>

By using container-fluid, the row will occupy the full width of the viewport. The offset-custom class will help 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 to position the left column content as desired (based on a 12-column grid) */
    margin-left: calc((100% - var(--container)) / 2);
    
    /* Set the maximum width for the left column content */
    max-width: calc(var(--container) / 12 * 6);
}

This combination should create the intended effect of having the right column content stretch to the screen edge while the left column is contained within a specific container size.

I hope this solution is helpful. Feel free to reach out if you have any more questions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to dynamically access BEM-style selectors using CSS modules?

For instance, I have this specific selector in my App.module.css file: .Column--active I want to access this selector from the App.js file in React using CSS modules. After importing all selectors from the CSS file as import styles from './App. ...

javascripthtmlcsscss-modulescss-loader

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

How do I go about uploading the code as instructed on the platform's e-commerce details page?

.mk_01{ color: #000000; font-size: 30px; font-style: normal; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; text-align: center; } .mk_02{ color: #000000; fon ...

htmlcss

jQuery Issue - Clash between multiple menus sharing the same class

Hey there! I'm currently diving into the world of jQuery and encountering an issue with my menu. Whenever I click on a menu item with either the "tm-nav-vertical" or "tm-nav-horizontal" class, it removes the .active class from the initial menu item. I ...

javascriptjqueryhtmlcssmenu

Enhancing spacing in Bootstrap 5 with additional spacers

Looking to enhance the spacers in Bootstrap 5 by incorporating it into Sass and customizing the variables. I'm aiming to avoid redundantly defining Bootstrap's spacer options, which are as follows: $spacers: ( 0: 0, 1: $spacer * .25, 2: $s ...

htmlcsssassbootstrap-5

What significance does the symbol "'" hold in the ng-style attribute?

Can someone explain the purpose of the " \' " in this code snippet? <div ng-style="{ \'cursor\': row.cursor }" Is there a reason why it can't be written simply as <div ng-style="{ cursor: row.cursor }" Here is ...

cssangularjs

Menu with a full-width fluid input field using semantic-ui

I am trying to create a fixed top menu with an image on the left, an input to its right, and another input on the far right. My goal is to have the center input stretch to fill all remaining space between the image and the other input. Although I would no ...

csssemantic-ui

Changing the text link color on IOS can be achieved by modifying the CSS properties

Recently, I encountered an issue with the text link color of my website. While I had set the link color to red for desktop view, it inexplicably changed to blue when viewed on an iPhone. Even after trying to use !important, the problem persisted. Can som ...

htmlcss

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

jqueryhtmlcssjpeg

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

phpjqueryhtmlcss

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

javascriptcssfunctionhtml-select

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

htmlcss

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

htmlcsstwitter-bootstrap

An additional pixel extending the entire width of 100%

I have a textarea that is 680 pixels wide, but I need to make it fluid by using percentages. When I use percentages to achieve a perfect 100% width, it seems to render 1 pixel more than it should. Here is the link to see the issue in action. ...

csswidthrenderingpixelpercentage

Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider. Link to Working Fiddle : Below is the HTML code : & ...

javascriptjqueryhtmlcss

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

What steps should I take to ensure my navigation bar spans across the entire page?

I'm new to this and looking for help. I want my navigation bar to span the entire width of the page without any white spaces on the sides or top. Below is my CSS: nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; backgr ...

htmlcssnav

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

javascripthtmlcssowl-carousel