IanS IanS - 2 months ago 52
CSS Question

Bootstrap - mixing container and container-fluid

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.)

enter image description here

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

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!

Comments