Bootstrap Grid System, Responsive Design, Column Classes

Bootstrap Grid System

Container: Bootstrap grid layout is wrapped inside a .container or .container-fluid class. The .container class provides a responsive fixed-width container, while .container-fluid creates a full-width container spanning the entire viewport.
Row: Inside the container, you create rows using the .row class. Rows are horizontal containers for columns and are used to ensure proper alignment and padding.
Columns: Columns are placed within rows and utilize classes like .col-* to specify the column width at different breakpoints. (extra small screens) (small screens) (medium screens) (large screens) (extra-large screens)
Extra Small (XS) - col-: This is the default grid system for all devices and doesn't require a specific class. It applies to screens smaller than 576 pixels wide.
Small (SM) - col-sm-: This breakpoint applies to small devices like tablets. It's triggered for screen widths equal to or greater than 576 pixels.
Medium (MD) - col-md-: This breakpoint caters to medium-sized devices such as laptops or desktops. It's activated at screen widths equal to or greater than 768 pixels.
Large (LG) - col-lg-: This breakpoint targets larger screens like desktops and becomes active at screen widths equal to or greater than 992 pixels.
Extra Large (XL) - col-xl-: This breakpoint is designed for extra-large devices, such as large desktops or wide monitors. It's triggered at screen widths equal to or greater than 1200 pixels.