CODEWITHSUNDEEP
htmltwitter-bootstrapcontainers
nsilva
nsilva

Reputation: 5622

Bootstrap, container, container-fluid

Here is what I am trying to achieve using Bootstrap:-

enter image description here

The red lines show the where container div is.

The thing I am having an issue with is the background colours. So for example if I did something as follows:-

    <div class="container-fluid">

        <div style="background: #888;" class="col-md-8">
            left content
        </div>

        <div style="background: #999;" class="col-md-4">
            right content
        </div>

    </div>

The backgrounds are how I want them to be but the 'left content' and 'right content' would then not be inside the 'container' like the rest of the sites content as shown below:-

enter image description here

How could I achieve this?

I'll explain further if this is not clear enough, thanks.

Upvotes: 1

Views: 1265

Answers (2)

aze&#243;s
aze&#243;s

Reputation: 4901

One solution is to warp the container and add a gradient background to it. That background should only be visible when the two columns are next to each other.

CSS

@media (min-width: 992px ) {
  .wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); }
}

HTML

<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col-md-8" style="background: #888;">
        Left content
      </div>
      <div class="col-md-4" style="background: #999;">
        Right content
      </div>
    </div>
  </div>
</div>

JSFiddle

Upvotes: 1

skander
skander

Reputation: 107

try this 

<div class="container-fluid">
<div class="row">
        <div style="background: #888;" class="col-md-8">
            left content
        </div>

        <div style="background: #999;" class="col-md-4">
            right content
        </div>
</div>
</div>

Upvotes: 0

Related Questions