Understanding the Bootstrap Grid System(Part 2) | Tutorial – 5

In this tutorial we will understand how we can control the responsive behavior of the bootstrap grid system on various screen sizes and devices. Do checkout the part 1 of this tutorial if you have not as this is the continuation of that same part. Click here to check it.

Bootstrap 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

We will use different column classes provided inbuilt in the bootstrap library to change the orientation of columns depending on which size of device is active based on the device width.
By default bootstrap has categorized 5 types of devices –

1. xs – extra small (width less than 576px)
2. sm – small (width between 576px & 768px)
3. md – medium (width between 768px & 992px)
4. lg – large (width between 992px & 1200px)
5. xl – extra large (width greater than 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
    • style.css (our custom css file)
  • 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
  • default.html

YouTube video tutorial –