what does container-fluid bg-3 bootstrap class does?

Question

Where To Find Me?

Lorem ipsum..

<div class="container-fluid bg-3 text-center"> <h3>Where To Find Me?</h3> <p>Lorem ipsum..</p> </div>

Answer 1

Bootstrap 3 reads:

Use .container-fluid for a full width container, spanning the entire width of your viewport.

The other counterpart of .container-fluid is .container. Bootstrap 3 doc says:

Use .container for a responsive fixed width container.

Means .container is responsive but has intervals. Bootstrap applies fixed CSS width style for each media breakpoint (xs, sm, md, lg). .container-fluid expands to fill the available width (using % width).

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

Consult here for more details.

Answer 2

you can define this code under the HTML element "col-lg-3" for bg-3 bootstrap this code work also with bootstrap 4 and bootstrap3.