59. Using the Grid System in Bootstrap 4 - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we are going to learn about #bootstrap4 #grid system. So, bootstrap’s grid system comprises rows, columns and #containers. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content. It’s built with flexbox and is fully responsive. Grid Classes: The Bootstrap grid system has four classes: - xs (for phones - screens less than 768px wide) - sm (for tablets - screens equal to or greater than 768px wide) - md (for small laptops - screens equal to or greater than 992px wide) - lg (for laptops and desktops - screens equal to or greater than 1200px wide) Also, these classes can be combined to create more dynamic and flexible layouts. Grid System rules: - Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding - Use rows to create horizontal groups of columns - Content should be placed within columns, and only columns may be immediate children of rows - Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows - Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4 - Column widths are in percentage, so they are always fluid and sized relative to their parent element. How does it work? - Containers provide a means to centre and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes. - Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side. - In a grid layout, content must be placed within columns and only columns may be immediate children of rows. - Thanks to flexbox, grid columns without a specified width will automatically layout as equal-width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples. - Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. Column widths are set in percentages, so they’re always fluid and sized relative to their parent element. - Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row. - To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra-large. - Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra-large devices, but not the first xs breakpoint). You can use predefined bootstrap grid classes (like .col-4) or Sass mixins for more semantic markup. ---------------------------- Week 2: Day 3 Section 7: Introduction to Bootstrap 4 Tutorial 58: Using Bootstrap 4 Grid System ---------------------------- Do subscribe and hit Bell Icon ---------------------------- Follow us in social media handles for opportunities and code related support. Instagram: https://www.instagram.com/wb.web/ Facebook: https://www.facebook.com/wbweb/ Twitter: https://twitter.com/wbweb_in/ LinkedIn: https://www.linkedin.com/company/wbweb/ ---------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for internship or freelancing opportunities. For consultation or partnership, related queries drop a mail to [email protected]. ---------------------------- Affiliate Space Brand: Hostinger International https://www.hostg.xyz/SH13I (International) https://www.hostg.xyz/SH2H (For India)