CODEWITHSUNDEEP
twitter-bootstrapcss
DaCh
DaCh

Reputation: 931

color right column background and override bootstrap container

I wanna set the second col background color. and i want it to stretch to the side of the screen, override the container thats it's in. anyone know how i can do this?

<div class="container">
          <div class="row">
            <div class="col-xs-12 col-md-6">

            </div>
            <div class="col-xs-12 col-md-6">

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

Like shown on this image sample of design
(source: image-share.com)

As always, thanks for your time

Upvotes: 2

Views: 1849

Answers (2)

potatopeelings
potatopeelings

Reputation: 41065

With CSS

@media (min-width: 992px) {
    #a {
        background: red;
        position: absolute;
        left: 0;
     }
 }

this would give you the effect you want if the 2nd div taller than the first div

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6" id="a">
            ...
        </div>
        <div class="col-xs-12 col-md-6 col-md-push-6">
            ...
        </div>
    </div>
</div>

Notice the extra col-md-push-6 on the 2nd div.

Upvotes: 1

A. Abramov
A. Abramov

Reputation: 1865

For the background color, I'd set a style or a css class:

<div class="col-xs-12 col-md-6" style="background-color:red">

</div>

It's not a good practice in css to make that div override a div it's contained at. If you'd like it to be over the other div, i'd just use z-index.

read more here.

EDIT: Snippet dog to your request.

<div class="container" style="left:400; background-color:blue;opacity:0.8;z-index:-1;">
  <h1> here the container starts</h1>
          <div class="row" style="z-index:0;"> <!-- the row is in front of the container, which allows elements to flow past the edge of it-->
            <div class="col-xs-12 col-md-6" style="background-color:green;opacity:0.8; width:100px; height:200px;">
            This div is fully contained, since you didn't apply z index & left to it. It's on the left because you didn't add the float trait to it.
            </div>
            <div class="col-xs-12 col-md-6" style="background-color:red;opacity:0.8;left:0; z-index:1;width:100px; height:200px; float:right;">
            Here the overfolowing div starts.<br> notice how it's partially out of the container.
            </div>
        </div>
  <h1> here the container ends</h1>
</div>

Upvotes: 1

Related Questions