How to Set a Background in a Bootstrap Column That Oversizes the Div

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 SVG won’t scale in Bootstrap div column

You need to put your background-size: cover; after background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;. In your case background-size is invoked before loading the image, so it didn't take effect.

Change:

.my-img {
  background-size: cover;
  padding-bottom: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
  }

to:

.my-img {
      padding-bottom: 100%;
      background: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Arctic_big.svg) no-repeat center center;
      background-size: cover;
      }

Example jsFiddle

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