Half-extended Bootstrap 4 container reaching the edge of the page

I'm looking to create a layout with a .container that consists of two distinct halves.

The left half should function as a standard .col-6, while the right half should extend all the way to the edge of the screen, similar to a .col-6 within a .container-fluid.

Here is an example for reference...

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at leo eu ex luctus dictum non nec justo.</p>
      </div>
      <div class="col-md-6"> <!-- this should stretch out to the right side -->
        <p>Pellentesque ac arcu orci. Nam semper sollicitudin mauris vitae condimentum. Sed ac posuere nunc.</p>
        <p>Vivamus interdum tellus vel vulputate cursus. Donec varius mauris nec sapien volutpat, eget consequat libero egestas. Aliquam in turpis congue purus fringilla mattis quis id velit. </p>
      </div>
    </div>
  </div>
</section>

I hope this explanation clarifies my request. Thank you for your assistance.

twitter-bootstrapcssbootstrap-4

Answer №1

Although Bootstrap 4 does not come with a ready-made solution for this specific layout, it can be achieved effortlessly with some additional styling.

In the method presented below, I utilize a top-level .container-fluid element to span the full width of the viewport. To simulate a "half container" in the left column, I introduce the .container-half class, which is essentially a modified version of the .container class with half the width. Additionally, to demonstrate responsiveness, the .container-half-md-left showcases an example.

Please note that the CSS provided is just a demonstration using manual media queries. In a production environment, it would be ideal to compile the entire set from SCSS.

Feel free to check out this CodePen link for more details.

HTML

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 px-0" style="background-color: LightCyan;">
                <div class="container container-half container-half-md-left h-100" style="background-color: LightBlue;">
                    <p>Curabitur ipsum nisl, volutpat non vulputate in, aliquet id ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin dolor velit, tristique eget leo eu.</p>
                </div>
            </div>

            <div class="col-md-6" style="background-color: LightSteelBlue;">
                <p>Aliquam dapibus consequat diam, a luctus nisi fermentum eu. Proin at enim at dolor convallis vestibulum. Etiam tempor vel enim sed sodales. Vestibulum rhoncus odio felis.</p>
                <p>Sed sodales turpis posuere vel. Proin at scelerisque elit, vitae feugiat lectus. Ut nisl dui, pulvinar at fringilla vitae, bibendum imperdiet mi. </p>
            </div>
        </div>
    </div>
</section>

CSS

@media (min-width: 576px) {
    .container-half { max-width: calc(540px / 2); }
}

@media (min-width: 768px) {
    .container-half { max-width: calc(720px / 2); }
    .container-half-md-left { margin-right: 0; }
}

@media (min-width: 992px) {
    .container-half { max-width: calc(960px / 2); }
}

@media (min-width: 1200px) {
    .container-half { max-width: calc(1140px / 2); }
}

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

"Enhance your tables with Datatables, Bootstrap 4, and

I've been struggling to remove the border lines between rows and columns in a jQuery DataTable. Despite trying various table options and styling approaches, the lines remain unaffected. The row dividers seem to be double and the column separators are ...

datatablesbootstrap-4

Using CSS backdrop-filter to create a unique blurred border effect for your web elements

In my quest for achieving unique visual effects, I have been experimenting with the backdrop-filter and element borders. While it is easy to create an element that blurs its background, I am facing challenges in making the filter affect only the border are ...

htmlcssborderblur

adjusting the position of text based on the content below it, either moving it upwards or downwards

Is it possible to ensure that the "cast" text always appears just below the "about" text, regardless of the length of the "cast" content in a top-to-bottom list? If the "about" section can vary in length, how can we make sure that the "cast" section stays ...

htmlcss

Prevent div from moving upward using CSS

Whenever I use the search box, a dropdown list of suggestions appears. However, the searchbox div element keeps moving both up and down. How can I prevent the div from moving upwards? The code snippet below shows a hardcoded unordered list of names for s ...

cssmaterial-ui

"Step-by-Step Guide to Dividing and Centering Text Sections with Dynamic

Initially, my intention is to implement the concept outlined below. The webpage has dual potential states. In the first scenario, two texts (with potentially varying lengths) are centralized together as a header. When transitioning to the second state, the ...

htmlcssvue.jscss-positioncss-transforms

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

javascriptcss

The issue with the stretched-link in Bootstrap 5 is that it is not functioning properly when used with a

I'm having a small issue with the stretched-link feature not working properly with my card. Despite trying everything from the Bootstrap documentation, including removing buttons as they are said to not work well with stretched-links, I still can&apos ...

htmldjangobootstrap-4bootstrap-5

Passing a value from the Trigger button to the Modal button in Angular-UI Bootstrap

Seeking some help. I am working with angular-ui-bootstrap alongside php and mysql. My goal is to pass a value from a list of links (dynamically generated from php mysql) to a modal button each time the modal is loaded. HTML // The link below is generated ...

javascriptangularjstwitter-bootstrap

Stylish Radial Hover Effect for Images Using CSS

I am looking to create a unique effect where upon hovering over an image, color will be applied in a radial shape on a grayscaled image within a div that is pointed by the cursorhttps://i.sstatic.net/64RJv.jpg Below you can see the desired outcome compare ...

htmlcssuser-interfacefrontend

Creating a CSS binding for width: a step-by-step guide

I have a complex layout with multiple elements in different divs that need to be aligned. Hardcoding the width or using JS on page load to specify values in pixels both seem like messy solutions. How can I achieve this without causing a zigzag effect? Her ...

htmlcsstwitter-bootstrap

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

Tips for dynamically hiding/showing a button depending on the focus of two different HTML inputs

I'm working on a login section and looking to add a unique feature: When a user selects the email or password input field, I want the button text to change to 'LOGIN'. If neither input field is selected, the text should display 'NOT A ...

javascriptjquerycssanimation

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

csshover

Updating the style sheet of a selected menu item on an ASP.NET master page

I created an asp.net master page with a menu setup like this: <menu id="menu"> <nav id="main_nav"> <ul id="menu-primary"> <li ><a href="./">Home</a></li> <li><a href="staff.aspx"& ...

javascriptjqueryasp.netcss

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

javascriptcssangularjscanvasd3.js

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...

javascripthtmljquerycss