Bootstrap container fill sides with colors

Question

I have the following template using bootstrap :

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:

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.

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

I didnt understand what you actually want to do, so let me ask: What you want is that the blue-gray section have the same width size of the logo? — Alejandro Maliachi Quintana, Jan 10 '17 at 17:10
Here is a non-resizable example of what I am trying to achieve: http://www.bootply.com/cTUFFpMZxf — CedricD, Jan 10 '17 at 17:16
Maybe this could help: the `.container` class must have a width 100% and a max-width of 1600px. This would prevent the container to get larger than the header but it also would be resizable. Check it out and tell me if that works — Alejandro Maliachi Quintana, Jan 10 '17 at 17:30
Unfortunately, this would not work because the 2 containers (blue and gray) would be stretched to 1600px. (example : http://www.bootply.com/k4sOVUuBfF). I need to have the content inside the blue and gray container within1200px. — CedricD, Jan 10 '17 at 18:25

Serg Chernata · Accepted Answer · 2017-01-10T18:47:54.243

2

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

edited Jan 10 '17 at 18:47

answered Jan 10 '17 at 18:15

Serg Chernata

12,280
6
32
50

I edited my question because I think it was rather confusing. I hope it is clear enough now, thank you! – CedricD Jan 10 '17 at 18:39
It works except on IE (unsurprisingly), but this is another issue, thank you! – CedricD Jan 10 '17 at 21:18
ie has their own gradient prefixes, this generator is very handy: http://www.colorzilla.com/gradient-editor/ – Serg Chernata Jan 10 '17 at 21:20

score 1 · Answer 2 · answered Jan 10 '17 at 18:46

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

Carol Skelly · Answer 3 · 2019-11-13T11:46:56.810

1

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

edited Nov 13 '19 at 11:46

answered Jan 10 '17 at 18:48

Carol Skelly

351,302
90
710
624

Bootstrap container fill sides with colors

3 Answers3

Linked