Bootstrap 3 Adding A Container-fluid Inside A Container?

Answer :

.full-width {     width: 100vw;     position: relative;     margin-left: -50vw;     left: 50%; }

<div class="container">   <div class="container-fluid full-width">   </div> </div>

This works because you are using vw - vertical-width which equals enduser's desktop width. This overrides % because a % is the percentage of a parent, vh uses the desktop.

You cannot use .container-fluid inside of a .container and get what you're trying to achieve. Look at the code for Bootstrap's .container class; it has a fixed width.

You need to use .container-fluid OUTSIDE of the fixed-width container.

An example is below:

<div class="container">     <div class="row">         <div class="col-md-12">             <p>Some Content</p>         </div>     </div> </div>  <div class="container-fluid">     <div class="row">         <div class="col-md-4">             <p>Item 1</p>         </div>          <div class="col-md-4">             <p>Item 2</p>         </div>          <div class="col-md-4">             <p>Item 3</p>         </div>     </div> </div>  <div class="container">     <div class="row">         <div class="col-md-12">             <p>Some More Content</p>         </div>     </div> </div> 

It's perfectly acceptable to have multiple containers throughout the site, wherever you need to make use of a Bootstrap Grid.