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
Post a Comment