CODEWITHSUNDEEP
csstwitter-bootstrap
CedricD
CedricD

Reputation: 93

Bootstrap container fill sides with colors

I have the following template using bootstrap :

![1600px](http://imgur.com/a/PjIH6)

I'm using a 1200px container for the blue/gray container and the image is 1600px.

I would like to fill the left side of the blue container (400px) with blue and the right side of the gray container (800px) with gray, but the fillers can't go over 1600px. Basically it has to match with the picture above the 2 containers.

Here is what I would like to achieve:

enter image description here

the content has to stay within 1200px, but the background colors must be filled to 1600px.

If I resize the template to 1200ish pixels, it should look like the following picture.

enter image description here Do you guys have an idea how I could achieve that? Every solution I tried resolve around ditching the bootstrap container and the content get out of line when i resize, which is something I would like to avoid.

Thank you!

EDIT: Here is a bootply example if needed: http://www.bootply.com/APwOkhCfQD

Upvotes: 4

Views: 4942

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362440

I answered a very similar question before.

Put the blue background color on the outer wrapper of container, and add a pseudo element to the right side with the light gray background.

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

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

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

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%);}

Upvotes: 3

Tony Chapman
Tony Chapman

Reputation: 88

Use pseudo classes on .service-container and .commitment-container. Position them absolutely and size them at 200px wide and 100% height. Add the background color and voila!

Example:

.service-container::before {
  content: "";
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

Upvotes: 1

Related Questions