Bootstrap Container Fill Sides with Colors

Bootstrap container fill sides with colors

Your current problem is that the image is hardcoded to 1600px width. You have two options:

Make your header completely fluid in width and remove double container wrap you currently have going on:

<div class="container-fluid">
    <div class="container"><!-- delete this -->

Or change the container class width to 1600:

.container {
    width: 1600px;
}

http://www.bootply.com/q35ERYfN7A

Update:

You can also achive the full background color effect via:

.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}

How to fill the background-color only for padding for Bootstrap's container-fluid?

Using absolute positioning :after also background-clip & background-image.

Solution 1: using background-clip & background-image

.container-fluid {  padding: 0 120px;  background-clip:  content-box, padding-box;  background-image: linear-gradient(to bottom, white 0%, white 100%), linear-gradient(to bottom, grey 0%, grey 100%); }

.content {  height: 1000px;}

<div class="container-fluid">  <div class="row content">    <div class="col-12">      Content    </div>  </div></div>

Background color not filling sides of row/column

It is because the grid you have built is not aligned with bootstrap's gird layout conventions. You should put the rows directly in the container-fluid.

<div class="container-fluid">  <section class="row" id="hero">    <div class="col"></div>  </section>  <section class="row" id="about">    <div class="col"></div>  </section>  <section class="row" id="portfolio">    <div class="col"></div>  </section>  <section class="row" id="contact">    <div class="col"></div>  </section></div>

Bootstrap - Full width layout two columns with different colors

You can try like this-

.blue-background {    background-color: blue;}.blue-background:after{  content:'';  display:block;  clear:both;}
.gray-background {    background-color: #eaeaea;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid">    <div class="row">      <div class="blue-background">        <div class="col-lg-6 col-xs-12 col-lg-offset-1">              <h1>Text here</h1>          </div>          <div class="col-lg-5 col-xs-12 gray-background">              <h2>Another text here</h2>          </div>      </div>    </div><!--  .row --></div><!--  .container-fluid -->

Get Two Columns with different background colours that extend to screen edge

Bootstrap 5 beta

The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...

Bootstrap 5 example

Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 5 nesting example

---

Bootstrap 4

The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.

Bootstrap 4 example

---

Bootstrap 3 (original answer)

Use another wrapper DIV around a 2nd container...

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div style="background-color: aquamarine; padding: 0">
    <div class="container">
        <div class="row">
            <div>
                <div class="col-sm-9">
                    <h1>Left Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
                </div>
                <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
                    <h1>Right Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
                </div>
            </div>
        </div>
        <!--  .row -->
    </div>
    <!--  .container-fluid -->
</div>

EDIT

Use a psuedo element such as..

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Bootstrap 3 example

---

Similar question: Bootstrap container fill sides with colors

Background color different on either side of container

The appearance of an extended background-color can be done with CSS pseudo elements..

.left:after {
    background-color:lightblue; 
    left: -999em;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.right:after {
    background-color:#4444ff; 
    right: -999em;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Demo: http://www.codeply.com/go/gHFYUnX6hE

Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.

CSS (formatting for illustration purposes and fixed width)

.content{
    padding:20px;
    border: 1px solid #269abc;
    background:#d6ec94;
}
[class*="col-"] {
    padding-top:10px; /* 15px side paddings automatically applied */
    padding-bottom:10px;
    border: 1px solid grey;
    background: transparent;
}
.fixed-width {
    display:inline-block;
    float:none;
    width: 300px;
}

The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.

CSS (background image)

#one {
    background-image: url([insert-url]);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
}

The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.

CSS (background color)

#two {
    background-color: grey;
    height:500px;
}

background-color works without any tweaks.

HTML

<section id="one">
    <div class="container">
        <div class="row text-center">

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HERE</div>
            </div>

            <div class="col-sm-4 fixed-width">
                <div class="content">HER</div>
            </div>

        </div>
    </div>
</section>

As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.

---

Related Topics