Bootstrap full width sections with graphical backgrounds

Bootstrap full width sections with graphical backgrounds

I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.

We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.

It also stretches to the view-port edges:

1. On the left we have red background stretching all the way to the view-port edge.
2. On the right we have a grey background image stretching all the way to the view-port edge.

I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).

Any idea on how to code the below graphical layout in bootstrap please?

      
      
          
              
                  
left
                  
right
                             
          
      
        
  

Answer by ochi for Bootstrap full width sections with graphical backgrounds

Using

as a starting point; I am guessing at your page's layout. Let's try this:

See below:

.cntn {    border: 1px red solid;  /* you can remove this (not needed) */  }  .red {    background-color: red;    text-align: right;    margin: 0;   /* optional */    width: 100px; /* adjust to suit your needs */    float: left;  }  .cta {    margin: 0;  /* optional */    float: right;    border: 1px solid green;  /* you can remove this (not needed) */  }

            
    
            
              
              
        Action      
    
    
      
left
      
right
    
    

Answer by NiZa for Bootstrap full width sections with graphical backgrounds

Something like this? Where black should be the grey gradient and max-width:400px could be anything.

.cta {    overflow-x: hidden;    position: relative  }    .text-outer .container {    width: 100%;    max-width: 400px;    background: grey;    z-index: 2;    position: relative;  }    .text-outer:before,  .text-outer:after {    content: "";    position: absolute;    width: 50%;    height: 100%;    top: 0;  }    .text-outer:before {    background-color: red;    left: 0;  }    .text-outer:after {    background-color: black;    right: 0;  }

  
    
      
        
          
left
          
right
        
      
    
  

Answer by Doge for Bootstrap full width sections with graphical backgrounds

Simply change 'div class="container"' to 'div class="container-fluid"'

Answer by E.Agolli for Bootstrap full width sections with graphical backgrounds

Use class="container-fluid" instead of class="container" and than do this style:

.container-fluid {  margin-right: auto;  margin-left: auto;  padding-left: 0px;  padding-right: 0px;  }  

Answer by Anand for Bootstrap full width sections with graphical backgrounds

jsFiddleLink

I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work

.custom {      width:calc(100% - (50% - 768px/2));  }    .custom {      width:calc(100% - leftCellWidth);  }  

You can set height of left as per height of hex image.

Answer by Raluca P. for Bootstrap full width sections with graphical backgrounds

Use jumbotron class outside the class container for full-width, as explained here.

HTML:

CSS:

.red {    background: url('awesomeredimage.png');    background-size: cover;  }  .grey {    background: url('awesomegreyimage.png');    background-size: cover;  }  

Answer by Lxske for Bootstrap full width sections with graphical backgrounds

All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps. Within container fluid you can add a regular container for the rest of your content. My code below explains this.

You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:

But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.

      
          
              
                                                  
              
              
                  
Call to action
                  
Discount etcetera
              
              
                                
          
          
              
                  
                                        
              
          
      
  
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72