-1

I'll try my best to describe the problem as good as possible:

Below is a design i need to implement using bootstrap. (preferably no JS/jquery, only css)

All content is in a bootstrap container (not fluid, responsive fixed width) with two columns.

The left green border should extend with the content in the first left (yellow) div.

The left green border should not extend when content is added in the right column (red).

I've tried some approaches but can't find the perfect solution.

Can anyone put me in the right direction to solve this?

My approach was to add a (full-width) div around the container, with a green border-left, and use multiple containers/rows. But then the height of the green border is also depending on the height of the right column.

I hope i explained the problem in an understandable way...

Thanks in advance!

Design

StevenQ
  • 182
  • 1
  • 11
  • https://stackoverflow.com/questions/23418117/extending-a-bootstrap-container-background-to-the-edge-of-the-page asks a similar question. My only extra requirement is to have a colored "border" instead of a fully colored gutter. – StevenQ Aug 16 '21 at 07:47
  • Please include the code you've attempted. – Carol Skelly Aug 16 '21 at 11:39

1 Answers1

0

as I understand your question. for the green box, you can use position fix or sticky as per your requirement. and for full with you can use container-fluid that can be possible.

Web Admin
  • 11
  • 4
  • When using fixed or sticky position on the green box, it would not "grow" together with the content of the first yellow div. – StevenQ Aug 16 '21 at 07:31