What is the relationship between the container, the blocks and the bootstrap grid?

What is the relationship between the container, the blocks and the bootstrap grid?
0

#1

I got confused with the containers, inline vs block vs inline-block and the bootstrap 12 column system.

-What is the difference between a container and a block?
-Do I absolutely need both and why?
-If I use bootstrap, why do I need to know about inline vs block elements? I can just use Bootstrap “col-xs-12” for example and it won’t matter whether my elements are inline or block because they will take the formatting of the parent element.

I have searched for the difference between containers and block (inline-block) but it only explains what each of them does and as far as I understood, they do the same thing, divide the website into blocks that can be styled and resized. Blocks would be placed in containers but here again, what’s the purpose of containers if we have blocks.

(Among other results, found that: https://teamtreehouse.com/community/div-containers-div-wrappers which does not answer my question and got me to ask myself what a wrapper was and that: https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block but this article got me even more confused)

Sorry if my question comes as very basic for most but I really need to understand the concept. Thank you whoever helps out!


#2

To really understand how BS works, you need to understand CSS. Because BS is nothing more than just pre-made classes, with it’s own style/formatting.

The best and easiest way to do this is just open up your Browser Developer Tools, click over the line that contains the BS class and look at the rules the different classes generates (on the right pane).

For example:
.container class sets some padding left and right, margin left and right, and max-width (depending on your browser window width).

.col-md-3 just sets a width of 25%, float: left (Because in the context of a 12-column grid layout, 3 columns is 1/4 of the page width, or 25%. And float:left allows you to put divs side by side on the same line.

So having a basic understanding of CSS, you can peek using your Dev Tools and see what really BS is doing behind the scenes.


#3

Hi, sorry for the late reply,
Thank you, I had a look and it does help to understand how each class is working.