CODEWITHSUNDEEP
csstwitter-bootstrap
Andrei L
Andrei L

Reputation: 3681

Bootstrap .container-fluid with inner columns fixed

Having in bootstrap, 2 columns into a non fluid container

.col-xs-9 / .col-xs-3

How can I make backgrounds for this columns to be full width to left and right margin?
I made this example 404: http://codepen.io/iamandrewluca/pen/VmOJVJ
But width: 75vw; and width: 25vw; does not work as I supposed.
How can I fix this?

wanted result:
* orange - container
* green - left column
* blue - right column
* darkgreen - left background
* darkblue - right background

result

I can just add

body {
    overflow: hidden;
}

and give both columns width: 100vw; but the background image content will go outside.

Upvotes: 0

Views: 234

Answers (2)

Andrei L
Andrei L

Reputation: 3681

Solved with manual using intensive calc on widths and margins for first-of-type and last-of-type.
example: https://codepen.io/iamandrewluca/full/zzWrXe/
Maybe I'll create a mixin to generate this for all columns with offsets, pulls, push, and all other stuff

UPDATE: updated to Bootstrap 4, fixed some problems with scrollable content

Upvotes: 0

evilgenious448
evilgenious448

Reputation: 528

Your background images are within a container which has a defined width. You would need to make the container have a width of 100vw, and then the left column to be 75vw, right to be 25vw. Then your background images will cover the whole screen.

Upvotes: 0

Related Questions