Bootstrap - mixing container and container-fluid - html

Question

I'm currently building a site which is one of those tall pages broken up in to horizontal panels for each different section.
Some of the horizontal panels are fixed-width centred in the middle (see 1,2,3,5 in diagram) and some are full-width (see 4 in diagram). For the fixed-width I'm using a ".container" class and that's easy enough and working fine. For the full-width panels I'm using ".container-fluid".
Now the problem I'm facing is as follows (see image for reference.)
So panel 4 is full width and consists of 2 columns. The textual content is between B & C, and C & D, however there is 2 background images that span A to C and C to E and I can't figure out how to do that.
I've tried to split it in to 2 columns and then have a fixed width section in the middle but can't get it working. This is where I'm currently at:
<div class="container-fluid">
<div class="col-sm-6">
<img src="" />
<div class="container">
</div>
</div>
<div class="col-sm-6">
<img src="" />
<div class="container">
</div>
</div>
</div>
Any advice greatly appreciated.

Answer 1

EDIT: Added two-column split for container-fluid.
From what I understood from the image shown on your question, I would recommend separating the containers and naming them with classes or ID's in order to remove stock margins or others that push it down or up.
<div class="container topContainer">
<p>Content here</p>
</div>
<div class="container-fluid midContainer">
<div class="row">
<div class="col-sm-6 leftPad">
<div class="row">
<div class="col-sm-6">
<p>Content here</p>
</div>
<div class="col-sm-6">
<p>Content here</p>
</div>
</div>
</div>
<div class="col-sm-6 rightPad">
<div class="row">
<div class="col-sm-6">
<p>Content here</p>
</div>
<div class="col-sm-6">
<p>Content here</p>
</div>
</div>
</div>
</div>
</div>
<div class="container botContainer">
<p>Content here</p>
</div>
And for setting the background, use the following CSS:
.leftPad {
background-image: url('example.jpg');
}
.rightPad {
background-image: url('example2.jpg');
}
This should wrap it up, and keep it clean without messing anything. To adjust margins and other placements, implement some CSS to those custom classes I've set up on the example.
As a tip I would say that do not use container inside a row or column. Wrap the whole page inside a column and separate the content itself with rows and cols to suite your needs.
Happy coding!

Answer 2

Found few solutions, but all used javascript. So here's my css-only solution. Cheers :)
/* just some styling for better view */
#mix {
background: black;
color: #fff;
}
.left {
background: url('https://static.pexels.com/photos/462254/pexels-photo-462254.jpeg') no-repeat center / cover;
}
.right {
background: url('https://static.pexels.com/photos/534020/pexels-photo-534020.jpeg') no-repeat center / cover;
}
.row {
border-top: 1px solid black;
}
.col-sm-6 {
padding-top: 15px;
padding-bottom: 15px;
}
/* and this below is basically what you need */
#media (min-width: 768px) {
.half-container {
padding-left: 15px;
padding-right: 15px;
max-width: 375px;
}
.left-half-container {
margin-right: -15px;
}
.right-half-container {
margin-left: -15px;
}
}
#media (min-width: 992px) {
.half-container {
max-width: 485px;
}
}
#media (min-width: 1200px) {
.half-container {
max-width: 585px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="mix">
<div class="container">
<div class="row">
<div class="left col-sm-6">
<div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="right col-sm-6">
<div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="left col-sm-6 clearfix">
<div class="half-container left-half-container pull-right text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="right col-sm-6 clearfix">
<div class="half-container right-half-container pull-left text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
</div>

Answer 3

Below is the structure and use images as a background images of container-fluid div
<div class="container-fluid">
<div class="container">
<div class="col-sm-6"> </div>
<div class="col-sm-6"> </div>
</div>
</div>