Hi there,
I have a container-fluid with 2 columns in like this:
What I am trying to do is to have the left column a set width on desktop with text in, and then the right hand columns to fill the rest of the page with an image in.
This is what I am tying to achieve:
However, I don’t know how to get the left hand side with the text in to line up with other elements on the page, like a container above it.
Can anyone help me achieve this? I am using Bootstrap 4
Hi,
Here’s a re-vamp of a similar demo I did for someone else in the forum but should give you the idea as its close to what you ask.
Here’s the codepen:
(View full size on codepen as I re-order to one column for small screens)
The main trick is using calc divided by the bootstrap breakpoints to allow the new element to match the bootstrap layout. (Hence the need for various media queries to follow the bootstrap methodology.)
boxes {
padding-left: calc((100% - 1140px) / 2);
}
Hope it helps:)
Thank you for that, that is just what I needed.
I am not too familiar with calc.
So in this example, it is giving the boxes container a left padding of full width, so 100%, and then removing 1140px, and then dividing it by 2?
Yes that’s basically it 
The bootstrap is 1170px wide (but it has some 15px x 2 negative/margin padding tricks going on so 1140px works out at what we need.)
If you subtract 1170px (1140px) from 100% then you get the measurement for the left margin. This keeps it in sync with the centred bootstrap layout. It’s then a matter of matching all the media queries down to the one column.
The image on the right has to be a background image if you want it to always fill that space. You could use a real image but it would push the element too tall unless you used a magic number height on it and then it won’t scale nicely.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.