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 –

  1.  Extra small devices (portrait phones, less than 576px)
    // No media query for xs since this is the default in Bootstrap
  2. Small devices(sm) (landscape phones, 576px and up)
    @media (min-width: 576px) { … }
  3. Medium devices(md) (tablets, 768px and up)
    @media (min-width: 768px) { … }
  4. Large devices(lg) (desktops, 992px and up)
    @media (min-width: 992px) { … }
  5. 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
    • 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 –

Leave a Reply

Your email address will not be published. Required fields are marked *