The_Little_Cousin The_Little_Cousin - 4 months ago 31
HTML Question

Bootstrap 3 Adding a container-fluid inside a container?

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

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