-3

I was watching this video and the instructor said that bootstrap requires us to use a container/container fluid when using the grid system. However, she failed to always use a container even when she used the grid system. If you have 1 row and a bunch of columns that you make responsive, does that mean you are still using the grid system or does there need to be more than 1 row, since thats the case she didnt use a container and i was confused as to why she did not when bootstrap states we should use a container? I am a bit confused as when i should use a container in general and more importantly lets say i do not use a container and just use the grid system, what will end up happening?

ssal
  • 95
  • 1
  • 1
  • 8
  • 1
    I think the documentation is pretty clear: `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.` https://getbootstrap.com/docs/3.4/css/#overview-container .. I advise you to change the instructor – Temani Afif May 20 '19 at 08:28
  • from the same documentation: `Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.` – Temani Afif May 20 '19 at 08:29

2 Answers2

2

You do not explicitly need to use .container or .container-fluid to use Bootstrap, but you should. The .container class gives you a fixed-width container, and the .container-fluid class gives you a full-width container which spans the entire width of the viewport. The only real rules that these two classes actually apply to your elements are padding-left: 15px and padding-right: 15px. These are put in place to counter the margin-left: -15px and margin-right: -15px that are generated by .row.

If you don't use .container / .container-fluid, then your rows will all be 'offset' a bit into the edges of the page. Of course, you can easily add in custom rules to get around this, and you may even find this to be advantageous in terms of crafting your desired layout.

It is considered 'best practice' to use the combination of .container > .row, along with .col-X children of .row to represent columns. These columns can occupy any amount of space, and there can be any number of columns, so long as they total 12. For example, [ .col-12 ] or [ .col-4, .col-4, .col-4] or [ .col-9, .col-3 ].

Also, do not get confused between this 'grid-like' layout of Bootstrap and the CSS Grid, which is a completely different 'framework', and something that your instructor may have mentioned around the same time.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
1

For Bootstrap 3 & 4, the .row class, which you use for the grid system, uses negative horizontal margins. The .container and .container-fluid uses horizontal padding to balance out the negative margins.

If you do not use the container system, you will encounter horizontal scrollbars sometimes at different responsive breakpoints. This is usually contextual on the parent object and it's margin/padding values.

You can use the grid system without the container, but it's good practice if you want to utilize Bootstrap as its intended or you might encounter unwanted scrollbars.

Joshua Potter
  • 11
  • 2