'How to add full width background in two column (col-md-6) on bootstrap 3

I would like to ask how to add full width background on two column (col-md-6) in bootstrap 3. Please refer to the image.

As you can see in the image there are two column the green background and the image. How to set full width background on each column?

Thanks for the help :)

bootstrap container size 1170px with two column md 6

<div class="container"> 
  <div class="row"> 
      <div class="col-md-6 the-green-bg"> 
        <h1>Lorem ipsum</h1> 
        <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p> 
        <a href="#">Learn more</a> 
              
        </div> 
        <div class="col-md-6"> 
        <!-- full-width image --> 
        </div> 
  </div> 
</div>

enter image description here

htmltwitter-bootstrapcss


Solution 1:[1]

see jsfiddle or snippet below ( but better see fiddle because you use col-md and you need to see the result in a larger area )

the second col-md-6 can't have a background-image because it doesn't a content in it and so it doesn't have a height to fill with background-image.

the trick is to set display:flex on the row so that the cols have equal height.

if you want the row to be full page width. use container-fluid instead of container

let me know if it helps

.row {
	display:flex;
}
.row .col-md-6{
	padding:30px 15px;
}
.row {
	background:green;
}
.row .col-md-6{
	background-image:url("http://placehold.it/350x150");
	background-repeat:no-repeat;
	background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid"> 
  <div class="row"> 
	    <div class="col-md-2"> 
			</div>
      <div class="col-md-4"> 
        <h1>Lorem ipsum</h1> 
        <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p> 
        <a href="#">Learn more</a> 
              
        </div> 
        <div class="col-md-6"> 
        <!-- full-width image --> 
        </div> 
  </div> 
</div>

Solution 2:[2]

<style>
 .padding_remove {
   padding: 0px;
 }
 .bg-green {
  background-color: green;
 }
 .bg-black {
  background-color: black;
 }
</style>

<div class="container-fluid">
 <div class="row">
  <div class="col-md-12 padding_remove">
   <div class="col-md-6 bg-green">
   </div>
   <div class="col-md-6 bg-black">
   </div>
  </div>
 </div>
</div>

Solution 3:[3]

https://codepen.io/mike1234-pixel/pen/ExwYyOb

The only way I could create something like this was by using javascript. see the codepen link above. the width and padding are anchored to a bootstrap standard container / columns at the top.

The downside to this solution is using js for layout purposes which is not ideal. However, achieving this layout on the design doesn't seem to be possible with css alone... I haven't found a solution to this on stack overflow myself.

The challenge here is having the inner edge of the columns align with a standard bootstrap container, which is of variable width, and having the padding on the outer edges of those columns align with the edge of a standard container.

 <html>
     <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <section>
          <div class="container">
            <div class="row">
              <div class="topcol1 col-12 col-sm-6">
                <p>col1</p>
              </div>
              <div class="topcol2 col-12 col-sm-6">
                <p>col2</p>
              </div>
            </div>
          </div>
        </section>
        <section>
            <div class="overflow-row">
              <div class="column1">
                <p>col1</p>
              </div>
              <div class="column2">
                <p>col2</p>  
               </div>
            </div>
        </section>
    
    <style>
    .overflow-row {
      display: flex;
      width: 100%;
      @media (max-width: 576px) {
        flex-direction: column;
      }
    }
    
    .topcol1 {
    background: yellow;
    }
    
    .topcol2 {
    background: orange;
      display: flex;
      justify-content: flex-end;
    }
    
    .column1 {
      background: red;
      
    }
    
    .column2 {
      background: green;
      display: flex;
      justify-content: flex-end;
    }
        
    </style>
    <script>
    let position = $('.topcol1').offset();
    let padding = position.left + 24;
    
    let column1width = $('.topcol1').width() + position.left + 24;
    let column2width = $('.topcol2').width() + position.left + 24;
    
    function addColumnPadding() {
      // these vars need recalculating/reassigning on resize
      position = $('.topcol1').offset();
      padding = position.left + 12;
      $('.column1').css('padding-left', padding)
      $('.column2').css('padding-right', padding)
    }
    
    function adjustColumnWidth() {
      column1width = $('.topcol1').width() + position.left + 24;
      column2width = $('.topcol2').width() + position.left + 24;
      $('.column1').css('width', column1width);
      $('.column2').css('width', column2width);
    }
    
    $(document).ready(function() {
      addColumnPadding();
      adjustColumnWidth();
    })
    
    $(window).on('resize', function() {
      addColumnPadding();
      adjustColumnWidth();
    })
    </script>
  </body>
 </html>

Solution 4:[4]

A flex box method would work here

https://codepen.io/nitrokev/pen/abqOoEr

.article-container{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
section{
margin-bottom:2rem;}

.article-grid{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
}
article{
flex:1 50%;
display: flex;
font-family: arial;
 }
article:nth-of-type(1){
background-color:blue;
color:white;
justify-content: flex-end;
}
article:nth-of-type(2){
background-color:red;
color:white;
justify-content: flex-start;
}

.article-inner-grid{
max-width: 600px;
}
.article-padding{
padding:2rem;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Arunkumar
Solution 3
Solution 4 Kevin Neal

Related Questions