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.


Comments

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?