Is there a way to align six columns on the left side and have a dynamic column on the right that fills the width of the browser window?

Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window?

When using a normal fluid container, the content on the left remains pinned to the left of the browser window. However, I want the six columns on the left to maintain their regular column pattern as the columns on the right expand. In the example below, the right container should stay fixed to the right side of the browser window while the left blue column expands as the window size increases. See example:

https://i.sstatic.net/SOJjt.png

I have tried using a fluid container, which works okay, but I do not want the left content pinned to the start of the browser window:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a1c0f1e2e5b405f405d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">>

<div class="hero-interior-banner bg-blue">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-xl-6 px-5 pt-5 pb-3 text-center text-xl-start">
        <h1 class="text-uppercase white">Title</h1>

        <p class="white">Some text goes here</p>

        <p> <a href="3" class="button-white">Learn more</a></p>
      </div>

      <div class="col-6 px-0">
        <div class="d-none d-xl-block hero-interior-banner-image float-end">
          <img class="interior-hero-overlay h-100" src="https://via.placeholder.com/400" alt="Hero overlay" />

          <img class="img-fluid h-100 w-100" src="https://via.placeholder.com/400" alt="Cancer research" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer №1

In my opinion, the best approach would be to forego using containers and stick with columns instead. Within your container, you can have two columns - one that is x6 wide as you mentioned, and a second column for your fluid section.

Having a column that is x6 wide might detract from achieving the desired fluid effect. Since x6 represents 50% of the screen width on all devices, the fluid area will naturally take up the remaining 50%, resulting in a segmented appearance.

Consider experimenting with different widths at various breakpoints such as SM, MD, and LG...

<div class="col-sm-10 col-md-9 col-lg-8">
   Your title and button
</div>

<div class="col"> 
   Fluid content to the right.
</div>

<!-- The first column will become wider as the screen size decreases -->
<!-- The second column has no fixed width, allowing it to occupy all available space irrespective of screen size -->

Answer №2

It's a bit unclear what you're looking for, but here are some possible solutions. Check out the Bootstrap flex docs for more options.

Try arranging six standard columns on the left and a flexible column on the right with minimal code:

.d-flex > div {
  border: 1px solid pink;
  min-height: 100px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="hero-interior-banner bg-blue">
  <div class="d-flex">
    <div class="">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
    <div class="flex-grow-1">Auto</div>
  </div>
</div>

The first six columns are styled for a specific layout:

.col {
  border: 1px solid pink;
  min-height: 100px;
}

.col-6+.col-6 {
  border: 1px solid green;
  min-height: 100px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534c534e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid hero-interior-banner bg-blue">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
      </div>
    </div>

    <div class="col-6">Auto</div>
  </div>
</div>

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 it possible to manipulate videos embedded in an iframe using javascript?

It's common knowledge that JavaScript commands from Google can be used to control YouTube videos, while Vimeo provides its own JavaScript commands for their videos. Both videos are typically embedded within 'iframes' on websites. I'm ...

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

Webpack 5 is unable to load animated gif files

Hello, I am currently diving into webpack and following the official documentation at https://webpack.js.org/guides/asset-management/#setup. My goal is to incorporate an animated gif using webpack 5. Although the placeholder for the gif is loading, I enco ...

having difficulty retrieving the initial selected value of a dropdown using selenium

Situation 1: On the screen, there are two fields named district and territory. Some users have a default value already selected in these fields, with the drop down disabled. Below is the code snippet for reference. <select id="abcd" name="xyz" clas ...

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

Setting a div to occupy the entire height of a webpage using HTML and CSS

Is there a way to make the div (the blue box) fill the entire page? I tried setting the body tag to height:100%, but it didn't work. You can view an example at http://jsfiddle.net/rVyrX/1/ ...

What could be causing my custom cursor to malfunction?

I've been attempting to customize the cursor image, but despite following all provided instructions, it's still not working: CSS: body, html { margin: 0px; padding: 0px; border: 1px solid red; cursor: url(images/rsz_red_crosshair.gi ...

Leverage Hubspot and Google Analytics to transfer session source and medium data

Is there a way to track session source and medium information in HubSpot to identify where a specific visit originated from before a form is filled out or another conversion event occurs? Ideally, this process would involve transferring the session and me ...

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

Tips on uploading information from a PDF document onto a website

My goal is to develop a program or script that can extract data from PDF form fields and automatically input it into the corresponding textfields on my website, all done through the front end. The problem I'm facing is not knowing where to begin with ...

Is it feasible to block indent the second line of a URL?

Is there a way to indent a second line of a URL so that it aligns perfectly with the first letter of the sentence? I attempted using <ul>, but encountered issues as it inherited small text and bullet points from the main .css file. Check out this li ...

Organizing an HTML layout

Looking for a way to sort a div structure based on a parameter, I came across a small JavaScript that seems to not work as expected. It appears that the sorting function is not parsing the values perfectly... This is the logic I am using for sorting: < ...

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...

How can images be resized according to screen resolution without relying on javascript?

Looking to use a large banner image on my website with dimensions of 976X450. How can I make sure that the image stretches to fit higher resolution monitors without using multiple images for different resolutions? ...

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...