Bootstrap 3 Fluid Container with centered content

Question

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.

Answer 1

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>