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>

Answer 2

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>