Full width content middle of 1170px using Drupal Bootsrap

Question

I'm using Drupal Bootsrap base theme and I'm building sub theme on top of it. Basically the site is the default 1170 px wide but middle of content on same page I would like to have browser full width content (max 1400px). But since the drupal Bootsrap theme has a container that s 1170 wide can I somehow make it wider middle of the div?

<div class="main-container container">
  <div>normal 1170 wide content</div>
  <div> full browser width content</div>
</div>

So the container class make that whole div to be 1170 wide. Can I somehow make it wider middle? Does bootstrap have any class for this stuff? Been trying to go through the documentation but haven't find anything related to case like this.

if your container is always going to be 1170px then you would have to move the full browser div out of that container otherwise it won't stretch to anything that is wider — Pete, May 16 '14 at 13:27
Yeah I thought it's might be like this. Was just hoping that Bootstrap would have some offset class or something. I guess I have to do bigger changes to the templates then :/ — user995317, May 16 '14 at 13:41
You could just remove that div from the container and then anything you need back in 1170px below just make another `
` but not sure if that would break the bootstrap — Pete, May 16 '14 at 13:50

score 0 · Answer 1 · answered Dec 19 '19 at 21:30

The right method would be to remove the .container class from the .main-container element, and allow that to be full width, then second step would be to wrap child elements of the .main-container with either .container or .container-fluid.

Please note this most likely will require to adjust the rest of the theme to follow same structure.

 <div class="main-container">
      <div class="container">
         <div>normal 1170 wide content</div>
      </div>
      <div class="container-fluid">
         <div> full browser width content</div>
      </div>
 </div>

Full width content middle of 1170px using Drupal Bootsrap

1 Answers1