Reputation: 3681
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
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
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
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