How do you create quick layouts with Bootstrap?

02 Tem 02:31

Bootstrap's grid is actually a clever implementation of the modern Flexbox system, but with a layer of syntactic sugar so you don't have to deal with pure CSS properties. For balanced columns, use the `.row` class as a container and `.col-*` for columns. By default, the system automatically divides the available space into equal parts. For example, `.col-md-6` gives you 2 columns of 50% on medium screens and larger, but they stack on mobile. The system is based on 12 "virtual" columns that you can split: `.col-4` = 3 out of 12 columns, `.col-8` = 8 out of 12 columns, etc. For advanced responsive behavior, you'll work with breakpoint prefixes: `.col-sm-*`, `.col-md-*`, `.col-lg-*`, `.col-xl-*`, `.col-xxl-*`. If you want your columns to have different widths depending on the screen, combine the classes: `<div class="col-md-8 col-lg-6">` will give you 8/12 (66%) on md and 6/12 (50%) on lg. Don't forget the `.row` class, which automatically handles margins and gutters. A classic pitfall: if you need columns to be strictly equal across all sizes, explicitly specify the same class for each breakpoint. Otherwise, columns may unexpectedly wrap on certain screens. And if you really want to push it, use utility classes like `.offset-*` to offset your columns or `.order-*` to rearrange their visual order independently of the HTML.