Bootscript Module 17

  Module 17 : Bootstrap Layout Overview. 

design flexible, responsive page layouts with Bootstrap’s layout system (containers, grid, breakpoints, utilities and CSS-Grid option). After this build and debug production-ready responsive layouts and justify design choices to engineering.

2. Concepts

2.1 The layout hierarchy

Bootstrap layouts follow a strict hierarchy: container → row → column → content. Containers provide horizontal padding and constrain width; rows create horizontal groups using negative margins to offset column padding; columns hold content and use a 12-column system so you can express widths as fractions of 12. This system is built on CSS Flexbox (columns are flex items) which gives responsiveness, reflow and ordering control. 

2.2 Why 12 columns?

Twelve is divisible by 2, 3, 4, 6 —makes common fractional layouts easy (half, third, quarter). Columns are logical units, not fixed pixels; combined with breakpoint suffixes they let you change layout at different viewport sizes. 

2.3 Breakpoints and responsive behavior

Bootstrap defines breakpoints (xs implicit, sm, md, lg, xl, xxl) that trigger different column rules. When you specify .col-md-6 you mean “take 6/12 columns (50%) at md and above; below md stack full-width unless otherwise specified.” Knowing min-width vs. max-width media query behavior matters when you design component collapse/stacking. 

2.4 Containers: fixed vs fluid vs responsive-fixed

.container — responsive fixed widths at breakpoints.

.container-fluid — always 100% width.

.container-{breakpoint} — fluid until that breakpoint, then fixed. Choose based on whether content should stay centered with margins or stretch edge-to-edge. 

2.5 Utilities and Flexbox controls

Bootstrap ships utilities for display, flex alignment (d-flex, justify-content-*, align-items-*), spacing (m-, p-), and responsive visibility. These reduce the need for custom CSS and speed iterations. 

2.6 CSS Grid option 

Bootstrap provides an alternative CSS Grid-based layout (opt-in) for more complex grid needs (explicit rows, gaps, auto-placement). Use when you need two-dimensional control (rows + columns) that Flexbox can't easily provide. Understand browser support and tradeoffs before switching. 

3. plan

Show 3 layouts (single column mobile, two-column responsive article layout, admin dashboard grid). Ask to predict how they collapse at small widths.

 container/row/col hierarchy with diagrams. code a basic layout:

<div class="container"> <div class="row"> <div class="col-md-4">Sidebar</div> <div class="col-md-8">Main content</div> </div> </div>

how classes change at breakpoints and demo resizing.

Build a responsive card grid using .row and .col-sm-6 .col-md-4.

Show how gutters and spacing work and how to control them with utility classes and the g- gutter classes.

CSS Grid option overview, when to mix custom CSS with Bootstrap utilities, accessibility considerations (tab order when columns reorder).

4. exercises

Exercise 1 — Two-column responsive blog layout 

Create a layout where:

On small screens: blog content stacks with the sidebar below content.

On md and up: sidebar is on the left (3/12), main content on right (9/12).

Solution:

<div class="container"> <div class="row"> <aside class="col-12 col-md-3 order-md-1">Sidebar</aside> <main class="col-12 col-md-9 order-md-0">Main article</main> </div> </div>

Explanation: col-12 makes each block full-width on xs; col-md-* gives widths at md+. order-md-* ensures main appears above on small screens but left/right position on md+. This uses flex ordering, not DOM rearrangement, keeping semantic structure for accessibility.

Exercise 2 — Card gallery 

Create a responsive gallery: 1 column on xs, 2 columns on sm, 3 on md, 4 on lg+ with consistent gutters.

Solution:

<div class="container"> <div class="row g-3"> <div class="col-12 col-sm-6 col-md-4 col-lg-3">Card 1</div> <!-- repeat for other cards --> </div> </div>

Explanation: g-3 sets gutters between columns; responsive col-* classes control column count. Cards will reflow automatically due to flex wrapping.

Exercise 3 — Complex dashboard Build a dashboard with:

Top header full width.

Left nav (2 cols), right content (10 cols) on lg, collapses to stacked on sm.

Inside content, create a 3-column widget area that becomes 1 column on xs.

Hints & solution outline:

Use .container-fluid for full width header.

Use nested rows inside .col-lg-10 for widget grid.

<header class="container-fluid">Header</header> <div class="container"> <div class="row"> <nav class="col-12 col-lg-2">Nav</nav> <section class="col-12 col-lg-10"> <div class="row"> <div class="col-12 col-md-6 col-lg-4">Widget A</div> <div class="col-12 col-md-6 col-lg-4">Widget B</div> <div class="col-12 col-md-6 col-lg-4">Widget C</div> </div> </section> </div> </div>

Explanation: Nesting rows inside columns must be contained in .row so guttering and alignment remain correct.

5. coding tips

Gutters look weird? Remember rows use negative margins and columns add padding; ensure .row is direct parent of .col-*. If you remove the .container, horizontal scroll can happen. 

Reordering vs DOM order: Use .order-* utilities for visual reordering but keep meaningful DOM order for accessibility and screen readers.

       

Use utility classes, not custom CSS, for rapid prototypes. But for large apps, extract repeated utility usage into small components to maintainability. 

Performance: Don’t load entire Bootstrap JS if you only use layout and utilities—consider building a custom CSS bundle via Sass to remove unused components.

When to use CSS Grid: Use Grid when you need explicit control over rows and columns simultaneously (e.g., masonry-like layouts). Keep CSS Grid opt-in and test across browsers. 

6. Build a responsive marketing landing page including:

section that centers text and a CTA on all breakpoints.

Feature grid: 3 columns on md, 1 column on xs.

Pricing cards: side-by-side on lg, stacked on sm.

Submit HTML + minimal CSS; include a short writeup breakpoint choices and accessibility considerations.

Grading rubric: correctness of responsive behavior (40%), semantic markup & accessibility (20%), code cleanliness & reuse of utilities (20%), choices (20%).

7. Research 

Official Bootstrap Layout & Grid docs (read and bookmark). 

Bootstrap utilities (flex, spacing) — to reduce custom CSS. 

CSS Tricks guide to Flexbox (concepts that underpin Bootstrap’s grid). (Searchable via web)

Articles comparing Flexbox vs CSS Grid and when to use each; conversion of an existing flex layout to CSS Grid to understand tradeoffs. 

8. reference

 Container types: .container, .container-fluid, .container-sm

       

Row: .row (children .col-*)

Columns: .col, .col-6, .col-md-4, .col-lg-3

Gutter utilities: g-0, g-1, g-2, g-3 …

Flex utilities: d-flex, justify-content-center, align-items-start

Order: order-0, order-1, order-md-0, order-md-1

Spacing: m-, mt-, mb-, p-, px-, py- with responsive suffixes.

9. Final notes 

Encourage us to read the official docs from the docs and explain any differences if using Bootstrap 4 vs 5 (note: grid implementations and utilities improved in v5).

                 

Have a prepared set of templates (empty project with Bootstrap included via CDN and a blank index.html) so can jump straight to implementation.

Use browser devtools to show how columns are sized, how flexbox properties apply, and to simulate device widths.