The Bootstrap grid explained, just in case you didn’t know the difference between a column and a row, or how columns work. This is mostly a video tutorial, not much coding done here.
The Bootstrap grid
Just like I explain in the video. Bootstrap by default has 12 columns, and no matter what screen size you are using, bootstrap will have 12 columns from left to right. As the screen gets smaller, the columns get narrower to fit the size of the screen. This means that eventually, some columns might get too small to fit next to each other, and have to stack one on top of the other.
Bootstrap break points
Break points are where are screen resolutions where Bootstrap decides to allow you to have an alternative layout. This is where you get decide what elements should start stacking.
By default, Bootstrap has 4 break points.
Extra Small – Anything less than 768px, which would be mobile phones and small tablets.
Small – Anything between 768px and 992px, which is an iPad portrait screen, or another big tablet.
Medium – Anything between 992px and 1200px, which are iPads, or other tablets in landscape mode and old square monitors.
Large – Anything above 1200px, which would be a widescreen laptop or desktop.
Small – Anything between 768px and 992px, which is an iPad portrait screen, or another big tablet.
Medium – Anything between 992px and 1200px, which are iPads, or other tablets in landscape mode and old square monitors.
Large – Anything above 1200px, which would be a widescreen laptop or desktop.
Useful resources
You can visit the following link for more information about the Bootstrap grid.
0 comments