bootstrap-layoutlisted

# Bootstrap 5.3 Layout System Bootstrap's layout system is built on flexbox and provides a powerful 12-column grid for creating responsive layouts. This skill covers containers, the grid system, breakpoints, and layout utilities. ## Breakpoints Bootstrap's responsive design uses six default breakpoints: | Breakpoint | Class infix | Dimensions | |------------|-------------|------------| | Extra small | None | <576px | | Small | `sm` | ≥576px | | Medium | `md` | ≥768px | | Large | `lg` | ≥992px | | Extra large | `xl` | ≥1200px | | Extra extra large | `xxl` | ≥1400px | Breakpoints apply at the specified width **and up** (mobile-first). ## Containers Containers are the fundamental building block for layouts. ### Container Types ```html <!-- Fixed-width container (max-width at each breakpoint) --> <div class="container">...</div> <!-- Full-width container (100% at all breakpoints) --> <div class="container-fluid">...</div> <!-- Responsive containers (100% until specified breakpoint) --> <div class="container-sm">100% until sm, then fixed</div> <div class="container-md">100% until md, then fixed</div> <div class="container-lg">100% until lg, then fixed</div> <div class="container-xl">100% until xl, then fixed</div> <div class="container-xxl">100% until xxl, then fixed</div> ``` ### Container Max-Widths | | xs<br><576px | sm<br>≥576px | md<br>≥768px | lg<br>≥992px | xl<br>≥1200px | xxl<br>≥1400px | |---|---|---|---|---|---|---| | `.container` | 100% | 540px | 720px | 96