Bootstrap: Two columns inside container, but one should break the container-CodePudding

I am using latest version of bootstrap and have a design with 2 columns where the first column should contain some text and the second column should contained a background image which fills the whole column up to the users right screen. I want the background image to go outside the column to the right, until it reaches the edge of the browser.

like this:

how can i make second column to go outside the container? That's what i am currently using which is not working (image gets cut off by container)

<div class="container">

                <div class="row">

                        <div style="" class="col-sm-12 col-lg-6">
                            
                            <p>Example text</p>
                                        

                        </div>
                        <div class="col-sm-12 col-lg-6 bg-image" style="background-image:url('http://placehold.it/1800x1045');">
                        

                        </div>

                </div>


        </div>

CodePudding user response：

Try adding a contain value to the background image.

style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"

CodePudding user response：

You can create the main container as "container-fluid" to fill the entire page content and then create the columns, one other container with your text and the other with the image, check the code below, ignore the height and the borders because I was trying to create your scenario:

<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="height: 500px;">
  <div class="row h-100">
    <div class="col-sm-6" style="border: 1px solid pink;">
      <div class="row">
        <div class="container">
         <div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
           <p>Example text</p>
         </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image:url('https://dummyimage.com/600x400/666/fff'); border: 1px solid red;">
   </div>
  </div>
 </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

What you are trying to do is not contemplated by Bootstrap, but you can use a workaround. Why it is not contemplated? Because for a 2 column layout, it uses up 50% of the div, and you are not asking for a 50/50 layout.

First of all, the container, fluid or not, doesn't entirely touch the side of the page. Also, in both cases it is symetrical, and your design is not.

So... what you want to do is a greater div that occupies 100% of the page, with a container (fluid or not) in it. With absolute positioning, you create another div that occupies 50% of the greater div, and has the image as background.

.greater-container {
  position: relative; //needed so that the .image-container can be properly positioned
}

.image-container {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 50%; 
  right: 0; 
  background-color: green; 
  background-image: url('http://placekitten.com/g/1800/1045'); 
  background-size: cover; 
  z-index: 0; 
}

.content-column {
  border: 1px solid red; //so that we can see it
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="greater-container">
  <div class="image-container"></div>
  <div class="container">
    <div class="col-sm-6 content-column">
      Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. 
    </div>
    
  </div>
</div>

As a sidenote, this is not an easy layout for a responsive website. That background-image will get resized a lot and will probably not always work well.