5

I'm sure this might be a simple one but I haven't figured it out yet.

How do you create a full screen fluid container and have the content, including the navigation, be centered on the page, as in a non-fluid container?

I'm just trying to get the top nav/header background to stretch across the page while keeping the content at a fixed width.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
George
  • 77
  • 3
  • 8

2 Answers2

5

You can surround the .container with your navigation content with another <div> on which you add the background styling. See the following example:

.background {
  background-color: #f99;
}

.content {
  background-color: #9f9;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="background">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 content">Content</div>
    </div>
  </div>
</div>
ckuijjer
  • 13,293
  • 3
  • 40
  • 45
  • Thanks for your answer, but what if there's a background image and I want it to be continued in the background but the rest of the content remain the same? – Sarah Akhavan Dec 25 '16 at 09:21
  • I'm afraid I don't completely understand your question. Is for example the background image taller than your content and does the bottom part get cut off. Or do you for example want a full height background image? – ckuijjer Dec 26 '16 at 10:50
1

A rough method is to use the Bootstrap grid concept. Bootstrap divides your row into 12 colums. The trick consists into the insertion of a 4-black-space block before and one after your 4-space block. Example: 

<div class="container-fluid">
 <div class="row">
      
  <div class="col-sm-4"></div>
      
  <div class="col-sm-4">
   <h2>Title</h2>
   <p>Your content here</p>
  </div>
      
  <div class="col-sm-4"></div>
 </div>
</div>
mengo
  • 196
  • 1
  • 5