Understanding the Bootstrap Grid System(Part 1) | Tutorial – 4
In this tutorial we will understand the working of the bootstrap frameworks grid system.
- The grid system in bootstrap framework is one of the most important aspects of bootstrap for achieving the mobile responsive properties.
- The grid system helps divide the entire screen into 12 parts.
- This grid system consists of 3 main CSS class namely – container, row and columns.
- All the responsive behavior is achieved by wrapping the content inside the columns(col class applied to division or section or block level elements) which are wrapped inside rows which are
- ultimately wrapped inside the container.
- So the hierarchy goes as follows – container > rows > columns
In bootstrap the responsive behavior is achieved by using media queries in CSS and we have 5 breakpoints for 5 standard devices –
- Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap - Small devices(sm) (landscape phones, 576px and up)
@media (min-width: 576px) { … } - Medium devices(md) (tablets, 768px and up)
@media (min-width: 768px) { … } - Large devices(lg) (desktops, 992px and up)
@media (min-width: 992px) { … } - Extra large devices(xl) (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
More information of grid system – https://getbootstrap.com/docs/4.1/layout/grid/
Setting up everything Library into our Project Offline –
Download this entire test code folder which will the full folder hierarchy with the necessary library files already set up – DOWNLOAD HERE
The folder hierarchy should look like this –
- test code
- bootstrap
- css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.3.1.slim.min.js
- popper.min.js
- css
- fontawesome-free-5.6.3-web
- css
- all.css (the only one we need to link in our project for font awesome icons)
- js
- etc
- etc
- css
- default.html
- bootstrap