title: Bootstrap 3 full browser width footer
body: <p>How do I make this standard Bootstrap 3 footer behave exactly as the stackoverflow.com footer you can see at the bottom of this page? Full browser window width colored background and text bounded by page width. I tested all the other stackoverflow post on the subject and nothing works for my page. My page HTML is below.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Roadmap&lt;/title&gt;
      &lt;link href="/Content/css?v=Bz3KZjU_pdOm2wAVr7z_ylCuQzQDs1O8N6pV4cvXc_Q1" rel="stylesheet"/&gt;
      &lt;script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body style="padding-top:0"&gt;
  
  &lt;div class="container" style="position: relative"&gt;
  
      &lt;div align="right" class="body-content" style=" margin-top: 8px; margin-bottom: 8px;"&gt;
  
      &lt;p style="display: inline; width: 1%; font-size: 90%; background-color: white; opacity: 0.8; padding: 3px; "&gt;
      &lt;a href="/Account/Register"&gt;Register&lt;/a&gt; | &lt;a href="/Account/LogIn"&gt;Log in&lt;/a&gt;
      &lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div class="navbar navbar-inverse"&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand" rel="home" href="/" &gt;&lt;img src="/Assets/images/logo.png"&gt;&lt;/a&gt;            
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;                
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Product&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Image Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;What&amp;#39;s New&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="/Support"&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
  
              &lt;li&gt;&lt;a href="/Download"&gt;Download&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
          &lt;div class="container body-content" style="height:200px"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-5" style="color:White"&gt;
                      &lt;h1 style="margin-top: 60px"&gt;Roadmap&lt;/h1&gt;
                      &lt;p style="font-size:1.2em; font-weight:lighter"&gt;Upcoming release&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- position absolute clears right margin, we set it again --&gt;
          &lt;div class="container body-content"&gt;
  
          &lt;h2&gt;Version 9.0&lt;/h2&gt;
          &lt;p&gt;Planned for Q4 2015&lt;/p&gt;
          &lt;hr&gt;
          &lt;footer&gt;
             &lt;p class="pull-right" style="font-size: 85%;"&gt;
             &lt;a href="/Store/Purchase_Terms" style="margin-right: 20px"&gt;Purchase terms and conditions&lt;/a&gt;
             &lt;a href="/Home/Privacy_Policy" style="margin-right: 20px"&gt;Privacy policy&lt;/a&gt;
             &lt;a href="/Company/Contact"&gt;Contact&lt;/a&gt;&lt;/p&gt;
             &lt;p style="font-size: 85%; line-height: 180%"&gt;Copyright &amp;copy; 2015 - CompanyName&lt;/p&gt;
          &lt;/footer&gt;
     &lt;/div&gt;           
      &lt;script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>