Why does nested Row/Column extend past container

Question

Still learning web dev so here is my question. I am wondering why when using a container class at the very beginning of my layout, and when adding a row with two Col-md-6 columns, the content extends past the container. The two columns with the forms inside extend past the jumbotron on both sides. Just confused. I think if I add an another container it would even it all out. Just dont know why that would be needed.

var toggle = function(){
	var exists = document.querySelector("#existButton");
	console.log(exists.innerHTML);


	if(exists.classList.contains("btn-warning")){
		exists.classList.remove("btn-warning");
		exists.classList.add("btn-info");
		exists.innerHTML = "copy";
		//document.getElementById("#existButton").innerHTML = 'check'
	} else {
		exists.classList.remove("btn-info");
		exists.classList.add("btn-warning");
		exists.innerHTML="check";
		//document.getElementById("#existButton").innerHTML = 'copy'
	}

	
	

}

body{
	/*background: repeating-linear-gradient(
		to right,
		#050210,
		#050210 50px,
		#271f41 50px,
		#271f41 100px
	)*/

	background-image: url(images/body_background.png); 
	
}
.jumbotron {
	margin-bottom: 0;
	background-color: #cbd0d3;

}

.container .jumbotron{
	border-radius: 0px;
}
.navbar{
	margin-bottom: 0;
	background-color: #44abe2;
	margin-top: 30px;

}

.navbar-default .navbar-nav>li>a {
	color: white;

}

.navbar .navbar-default {
	border-radius: 0px;
}

.navbar-default .navbar-brand{
	color: white;
}

.automatic {
	background-color: #6e8a99;
	padding-bottom: 40px;
	border-bottom-left-radius: 6px;
	
}

.manual {
	background-color: #83929a;
	padding-bottom: 40px;
	border-bottom-right-radius: 6px;
}

#ml-2{
  padding-right:0;
}



  
    
    
    

    
    
    


    Mailbox Creator
  
  
    
      
        Brand
        
        
          
            
              
                Mailbox Management
              
              
                User Mailbox Management
                Resource Mailbox Management
                Mailbox Update Management
              
            
          
          
            
              Hello Username
            
          
        
      


      
        Mailbox Creator Pro
      



      
        
        
        
        
                  
            Automatic
            
              Account Name
                
                  
                  
                
                  
                
                
          
          
            
              Does account have email?
              
                
              
              
                
              
            
          
          
        


        
        
        
        
                  
            Manual
            
              Email
              
                
              
              Account
              
                
              
              
                
              
                    
                
          
            
              Email exist?
              
                
              
              
                Check

Carol Skelly · Accepted Answer

In Bootstrap, left/right padding (15px) on the columns is used to create the gutter/spacing between columns (col-*). The .row counteracts the padding by using negative margins (-15px) so that the outer columns (first/last) in any row are aligned to the edge of the container (and other content on the page).

In your case, a background-color has been applied to .automatic and .manual which are columns. Because the bg color is on the columns (and not the content of the columns), it appears that the columns are overflowing the row (which they actually are as explained above for the gutter.)

So for side alignment with other items in the container, you should apply the background-color to the content of the columns instead...

Demo: https://www.codeply.com/go/s07FmLZKuY

.automatic {
    padding-bottom: 40px;
    border-bottom-left-radius: 6px;
}

.automatic > form {
    background-color: #6e8a99;
}

.manual {
    padding-bottom: 40px;
    border-bottom-right-radius: 6px;
}

.manual > form {
    background-color: #6e8a99;
}

You may also want to add padding to the inner forms if you don't want their content against the edge.

More on the "gutter" in the Bootstrap docs..

Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

Why does nested Row/Column extend past container

Answers (2)

Related Questions