Bootstrap 5
Bootstrap 5 is a powerful front-end framework for building responsive, mobile-first websites. It provides a flexible grid system, prebuilt components, and utility classes that help developers create consistent and modern layouts quickly.
Row and Columns
Bootstrap 5 is built on a 12-column responsive grid system, giving you full control over how content is arranged across the page. You can play around with col-1 through col-12 and combine them in different ways to create different layouts.
Column Breakpoints
Bootstrap allows you to control how your layout changes at different screen sizes using breakpoint-based column classes. It uses a mobile-first approach: the default col- applies to all screens, while col-sm-, col-md-, col-lg-, col-xl-, and col-xxl- override the layout at larger screen sizes.
Row Container
Containers are the foundation of Bootstrap layouts. They wrap your content and control the maximum width of your page. Most pages use .container by default, while .container-fluid is best reserved for sections that need true edge-to-edge width.
Column Order
Bootstrap lets you change the visual order of columns without changing your HTML structure by using the order-* utility classes. This is especially useful when you want content to appear in a different order on mobile vs. desktop.
Ratio
Bootstrap 5 uses Ratio utility that helps you maintain consistent aspect ratios for embedded content such as images, videos, maps, and iframes. Instead of manually calculating heights or using padding hacks, Bootstrap uses the modern CSS aspect-ratio property to automatically preserve width–height proportions.