Grid Bootstrap is specifically like

Tram Ho

Introduce

Recently, I see a number of newcomers learning css using bootstrap grid quite confused, container row col nested all kinds of deviations, the problem is because they do not understand the nature of grid bootstrap. This article I will explain how it works for those who are still confused!

Theory

Grid bootstrap is famous now, when I first learned, everyone used it to responsive, split layouts, now flex is born and is extremely powerful to do the job of dividing the layout, many people still use bootstrap. There are a few things to remember to understand grid bs:

  • container-fluid: width: 100%; padding-left: 15px; padding-right: 15px; So all the content placed inside the container-fluid will be nearly full screen (vertical), 15px from the left and right border, its purpose is not to keep the content close to the margin, it will look very bad.
  • Container:

The container is also 15px from the left and right margins, margin-left and right auto will help the container always center the screen, depending on the screen size of the device, the container will have a different width, instead of full length like container-fluid

The purpose of this is that when the screen is bigger, the content is only in a fixed space in the middle of the screen, but when the full screen is long, the content looks very rough and ugly. Ok so if you want the content to be full of the device length, with a 15px margin, use container-fluid, this one is used for footer header, use right after header, footer tag, because these 2 are usually full screen, also use container for main content

  • row and col containers are easy to understand, but row and col are new ones that you often have trouble with. Raising a problem like this, we have a product list page, each row will have 4 products, each product is spaced 30px apart, all content fit in the container. If there is no grid bs, we will use float-left for each sp, each sp will margin-right: 30px, the 4th sp will be margin-right: 0, each sp will have width: calc ((100% – 30x3px) / 4 ). 30×3 because 4 sp, there are only 3 spaces between them. The treatment of bs: .row: display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; .col-3: width: 25%; padding-left: 15px; padding-right: 15px;
  • the container is padding left and right 15px, row is deliberately sticking out for = container when the margin lef right -15px, col padding left and right 15px, oh so compared to row col, the margin is 15px, but compared to the container, it is just right Fit the content inside, make sure when on the baby screen, the container is full the same as the device length or when using container-fluid, each col will also be 15px apart, and each col will be 15px apart x 2 = 30px. How about we want each col to be 40px apart and still 15px from the screen margin? Come to think of it, please see the answer in the end! So why is it always 15px? This is really nice to see, then use it, but 16px, 20px is fine. If the design is not 15px then don’t tell bootstrap it to 15px, we just do the same =)) So why the boostrap is divided into 12 col but not 10, 16 … Think before watching the ending !

Here you go

Answer question 1, if you want each col to be 40px apart and still 15px away from the screen margin? => container still padding left right 15px, row margin-left: -20px; margin-right: -20px; col padding left right 20px; However, we have to add the overflow-x: hidden container because at this time the row is too long, and on mobile, the interface is overflow. Answer 2, why is 12 col? Since 12 is so easy to divide, it can be split into many different parts, for example 3 guys col-4, 4 guys col3, 1 guy col-3 + 1 guy col-9, 6 guys col-2. .. If using a total of 10 col, it is impossible to divide that much. Most people divide 1 row into 3 or 4 items, the common multiple of 3 and 4 must be 12, it’s fine to divide into 24 col but that’s too small =)))

Share the news now

Source : Viblo