Bootstrap Class Container

1

I read somewhere that I should only use one container class (container or container-fluid) to wrap all the body content. Is that right?

Well, I was doing a navbar following W3 tutorial and there is a container-fluid inside the nav tag

So, how can I use container correctly? Only one por page or one for each element?

2

This is the css for the class container.
You can use the class container as many times as you want in a page. Container is used to wrap up contents like div.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
1 Like
3

@nanquim

It can get confusing easy. When you were following W3 tutorial, was it for Bootstrap containers?

If you read the Bootstrap documentation, it states: "Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable."
Check out Bootstrap Documentation

1 Like
4

Ok, so I cant use several containers, but I can’t nest them

5

@nanquim

It is not about what you can’t do or can do. It is simply not recommended for you to nest a container within a container for Bootstrap framework alone. Why don’t you experiment to see what it looks like to understand why it does the way it does? I have created a simple CodePen where you can experiment.

You can change these sizes of the image by changing the dimensions of the link (400x150) to something else.

To play with containers, you can move their final </div> around. You can clone it to make it your own.

https://codepen.io/pkshreeman/pen/ybWzge

2 Likes