Bootstrap 3 Adding a container-fluid inside a container?

Question

I have a normal container, and inside this container I want to add a full-width container-fluid, so that the container is Full View Point across my screen. I tried this, but it's not going full width.

<div class="container">

<div class="container-fluid">

</div>

</div>

According to me the container-fluid is full width across the container and not the screen. Any way to override it?

Answer 1

.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.

Answer 2

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.