Why use container inside navbar’s in Bootstrap?

Question

I was learning how to use Bootstrap’s Navbar, and I had a question. All the examples I found of using the navbar, have right after the same a container. It is more or less like this:

<div class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Lalala, também tem só o container, sem o -fluid -->
  </div>
</div>

Could anyone explain to me why we put? I can understand even the use of class="container", but the class="container-fluid" no. Wouldn’t it be better just not to put the container-fluid? What is the advantage of using a container inside a navbar?

Answer 1

Rows must be placed Within a . container (Fixed-width) or . container-Fluid (full-width) for Proper Alignment and padding.

In Portuguese:

Rows should be placed inside a . container (fixed width) or . container-Fluid (total width) for an appropriate alignment and padding value.

This is more related to a good practice guide. If you analyze the code well css of bootstrap, you will notice that there is a whole work behind the system of grid, where we have the hierarchy container (or container-Fluid) > row > col-x-nn.

Obs.: Remembering that there is no need to follow this concept to the letter, but for optimal behavior, it is recommended.

To mount a grid system correctly, we should use them in that order since:

• container will create a margin
• The element row has a negative margin, to give the feeling of an element full-width
• And finally, the element col-x-nn has a padding, to prevent everything from being "crushed"

In addition, the container keeps the content centralized.

So why use the container in other areas?

To maintain the harmony of the site. Imagine that for each section of the site you create one section with a specific margin. When doing a maintenance or need to adjust this margin, you would have to analyze all sections and adjust them individually. With the container everything is standardized and organized in the same place.

It also serves as a guide to good practice in other areas.

Breakpoints

Besides all this, the container has definition of width based on their breakpoints or "break points" (value in which the layout changes based on the width of the screen being used. Mobile, tablet, etc). This serves to have the behavior of never getting too small (on large screens) and maintain the proportion on all devices, be they cell phones, tablets or computers.

---

Real example

It’s been a while since this happened to me, so I don’t know if it’s still happening or if you’ve updated. But there was a time when a custom element that I had added to nav-bar was played to bass line after having the toggle from the activated menu. This problem was solved when I returned to .container (had removed because it did not find it necessary). This happened because it created the appropriate grouping for the elements.