Making a Bootstrap fluid container align with the left of a container and full width image?

[toolman]

Hi there,

I am using Bootstrap to create a page.

I would like the have the left hand side to start where a normal container starts above it and then the right hand side stretch all the way across to the right using the rest of the space of the container-fluid div.

However, I can’t seem to work this out.

This is what I have tried, but it doesn’t work.

<main>
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">Left</div>
        <div class="col-sm-8" style="background: #ff0000">Right with bg image all the way across</div>
      </div>
    </div>
  </div>
</main>

Does anyone know how I can achieve this?

Thanks

[PaulOB]

Do you mean something like this old demo from another thread?

You have to write your own code if you want one side to extend to the edge of the viewport.

I had a rough go but it gets a little awkward and you have to handle the width of the left column.

It’s only full width above 1200px but you’d have to match the media queries if you want to go smaller.