0

I'm trying to align the contents of container-fluid with another container in bootstrap. This image shows how I'd like it to align, with the image flush left and the green background flush right, for a broken grid layout.

But I want the left edge of the background to line up with the gutter of a normal container and the right edge of the copy to line up with the right edge of container.

https://i.stack.imgur.com/2ghz6.jpg

The code below is what I have tried. Am I over thinking this or is not possible with bootstrap?

<div style="background: linear-gradient(90deg, #ffffff 41%, rgba(209,224,215,.4) 41%);padding: 100px 0;margin-bottom: 100px;">
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6" style="padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0">
                <img src="images/hero-03.jpg" alt="" class="img-fluid">
            </div>
            <div class="col-lg-3">
                <p>Lorem Ipsum</p>
            </div>
            <div class="col-lg-3"></div>
        </div>
    </div>
</div>
elevatrons
  • 23
  • 1
  • 5
  • I'm a bit confused as to what you want / what the problem is. Are you saying that the two columns aren't flush up against the edge of your page? – Obsidian Age May 15 '19 at 23:30
  • I'd like for the image to be flush left with edge of the page to the middle of the page. The background to be flush right with the edge of the page and align the left edge with the gutter of column two. And the copy to go from the middle of the page and be flush right with the edge of column three the end of the container. – elevatrons May 16 '19 at 00:40
  • What exactly is not working? A quick C/P: https://jsfiddle.net/tdyq5u8w/3/ seems to match what you're looking for. Unless something else on the page is affecting your output. – djnz May 16 '19 at 02:14
  • You've tagged this question with Bootstrap-4... so you need to follow the `container` and `container-fluid` as per Bootstrap, right? – Akber Iqbal May 16 '19 at 05:40

1 Answers1

0

Replace your code to the below code:

<div class="container-fluid">
<div class="row justify-content-center align-items-center mt-5">
    <div class="col-lg-4 col-4" style="position: absolute;z-index: 1000; left: 0px">
        <img src="https://images.pexels.com/photos/1250260/pexels-photo-1250260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Cinque Terre" class="img-thumbnail" >
    </div>
    <div class="offset-3 col-lg-8 col-8 p-5" style="background-color: lightgrey; height: 380px;">
        <p class="pt-5 pb-5 ml-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

Ismail Dadwad
  • 1