Bootstrap Module 7

  Module 7 : Bootstrap Grid System – Basics. 

1. Concepts 

1.1 What is a Grid System?

A grid system is a structure for arranging content into rows and columns.

 It imposes a predictable visual rhythm so that developers can place components consistently across screen sizes.

1.2 Bootstrap’s Approach

Bootstrap uses a 12-column responsive grid. Everything flows inside a .container (or .container-fluid) which centers and constrains content. Rows (.row) create horizontal groups of columns. Columns (.col-*) define how much of the 12 available width a content block should occupy at particular breakpoints.

Important idea: the grid is fluid by default — column widths are percentages derived from the 12-column abstraction. This is why the grid scales across device widths.

2. Containers, Rows, Columns — The Anatomy

2.1 Containers

.container — responsive fixed-width container (width changes at breakpoints).

.container-fluid — always full width (100%).

.container-{breakpoint} — new in modern Bootstrap versions (e.g., .container-md) to make containers expand to 100% until that breakpoint.

2.2 Rows

Use .row to create a horizontal group for columns.

.row has negative side margins which align columns to the container's padding; columns have horizontal padding (gutters).

2.3 Columns

Columns are children of .row with classes like .col, .col-6, .col-md-4.

.col (without number) creates equal-width columns.

Numeric classes map to the 12-grid — .col-6 = 6/12 = 50% width.

Breakpoint prefixes control when the rule applies: .col-sm-4 applies at sm and above.

3. Breakpoints & Responsive Behavior

Bootstrap breakpoints (typical):

xs — <576px (no prefix, e.g., .col-6)

sm — ≥576px (.col-sm-*)

md — ≥768px (.col-md-*)

lg — ≥992px (.col-lg-*)

xl — ≥1200px (.col-xl-*)

xxl — ≥1400px (.col-xxl-*)

Rules cascade upward. Example: .col-md-6 means full-width on small screens (stacked), half-width on md and above.

4. Basic Examples 

4.1 Simple equal columns

<div class="container">

 <div class="row">

   <div class="col">A</div>

   <div class="col">B</div>

   <div class="col">C</div>

 </div>

</div>

Behavior: three equal-width columns on all screen sizes.

4.2 Fixed-width column using numbers

<div class="container">

 <div class="row">

   <div class="col-4">Left (4)</div>

   <div class="col-8">Right (8)</div>

 </div>

</div>

4.3 Responsive columns using breakpoints

<div class="container">

 <div class="row">

   <div class="col-12 col-md-6">Half on md+, full on xs/sm</div>

   <div class="col-12 col-md-6">Half on md+, full on xs/sm</div>

 </div>

</div>

4.4 Nesting columns

<div class="container">

 <div class="row">

   <div class="col-8">

     Parent (8)

     <div class="row">

       <div class="col-6">Nested 6</div>

       <div class="col-6">Nested 6</div>

     </div>

   </div>

   <div class="col-4">Side (4)</div>

 </div>

</div>

5. Layout Controls

5.1 Offsets & Auto-margins

Offsets: use .offset-md-3 to push a column right by 3 columns at md and up.

Auto-margins (utility classes): ms-auto, me-auto, mx-auto can be used for alignment within the row.

Example:

<div class="row">

 <div class="col-md-4">Left</div>

 <div class="col-md-4 offset-md-4">Right (pushed)</div>

</div>

5.2 Ordering

.order-1, .order-md-2 change visual order while keeping DOM order for accessibility if needed.

Example (mobile-first stacking but desktop swap):

<div class="row">

 <div class="col-12 col-md-6 order-md-2">Main</div>

 <div class="col-12 col-md-6 order-md-1">Sidebar</div>

</div>

5.3 Gutters (spacing between columns)

Bootstrap uses CSS variables for gutter sizes. You can change gutters with .g-0, .g-1, .g-2, ... or responsive gutter utilities like .gx-3 for horizontal gutters.

Example: <div class="row g-0"> removes the gutters.

6. Debugging Common Issues

Columns not aligning: Ensure .col-* are direct children of .row.

Unexpected horizontal scroll: Often caused by negative margins of .row combined with container settings or wide elements inside columns; wrap and check for width or large img elements — use .img-fluid.

Breakpoints not applying: Confirm correct prefix and no overriding CSS later in cascade.

Gutters collapse: If row has g-0, gutters removed intentionally.

7. Exercises 

Exercise 1 — Two-column responsive layout

Create a layout where content stacks on small screens and shows two columns (2/3 and 1/3) on md and above.

Solution:

<div class="container">

 <div class="row">

   <div class="col-12 col-md-8">Content — 2/3 on md+</div>

   <div class="col-12 col-md-4">Sidebar — 1/3 on md+</div>

 </div>

</div>

Exercise 2 — Centering a column

 Put a 6-column-wide card centered horizontally on lg and above.

Solution:

<div class="container">

 <div class="row">

   <div class="col-lg-6 mx-lg-auto">Centered on lg+</div>

 </div>

</div>

Exercise 3 — Reordering for desktop

 On mobile: A then B then C (stack). On desktop: show C first, then A, then B.

Solution:

<div class="row">

 <div class="col-12 col-md-4 order-md-2">A</div>

 <div class="col-12 col-md-4 order-md-3">B</div>

 <div class="col-12 col-md-4 order-md-1">C</div>

</div>

8. Build a Responsive Card Grid 

Goal: Create a responsive card gallery: 1 column on xs, 2 columns on sm, 3 columns on md, and 4 columns on lg and up. Cards should have equal height, responsive images, and accessible headings.

Files: index.html, styles.css (optional), Bootstrap CDN link.

Step 0 — Boilerplate

<!doctype html>

<html lang="en">

<head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Card Grid Lab</title>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 <!-- content will go here -->

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.0/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Step 1 — Create grid skeleton

<div class="container py-4">

 <div class="row g-3">

   <!-- Repeat .col for cards -->

   <div class="col-12 col-sm-6 col-md-4 col-lg-3">

     <!-- Card markup -->

   </div>

   <!-- ... 8 cards total ... -->

 </div>

</div>

Step 2 — Card markup (equal height)

<div class="card h-100">

 <img src="image.jpg" class="card-img-top img-fluid" alt="Description">

 <div class="card-body d-flex flex-column">

   <h5 class="card-title">Card Title</h5>

   <p class="card-text">Short description...</p>

   <div class="mt-auto">

     <a href="#" class="btn btn-primary">Action</a>

   </div>

 </div>

</div>

Notes: h-100 forces the card to fill the column height; d-flex flex-column on card-body with mt-auto pushes the action button to the bottom ensuring equal vertical layout.

Step 3 — Test & iterate

Resize the browser window to verify column counts at breakpoints.

Ensure images don't overflow — use object-fit: cover; via a small CSS or Bootstrap utilities.

Validation Checklist:

No horizontal scroll.

Cards align in rows and wrap properly.

Buttons are aligned and reachable.

Images have alt.

9. Research 

Grid systems historically: Research how early frameworks (e.g., 960 Grid System) influenced responsive grid thinking.

CSS Grid vs Bootstrap Grid: Compare the native CSS Grid Layout with Bootstrap’s flexbox-based grid. When should you prefer one over the other? Build the same layout with CSS Grid and Bootstrap Grid and compare pros/cons.

Performance : Analyze bundle sizes and rendering time when using many Bootstrap components vs. a custom lightweight grid. Measure paint/layout times using DevTools.

Accessibility : how DOM order vs visual order affects keyboard navigation and screen reader flows. Write an accessible component that reorders visually but preserves logical reading order.

academic articles on responsive design, CSS-Tricks guides on CSS Grid, official Bootstrap docs.

10. Coding Specialist 

Prefer semantic HTML: Use <main>, <section>, <article> around grid groups where meaningful.

Keep DOM order logical: When reordering for visual effect, ensure keyboard and screen reader order remain logical unless you intentionally choose otherwise with clear rationale.

Minimize overrides: Avoid heavy CSS overrides to Bootstrap core — extend via utility classes or scoped styles.

Images: Always use responsive images (<img srcset> or img-fluid) and alt attributes.

Gutters & spacing: Use Bootstrap utilities where possible; they are predictable and responsive.

Testing: Test on devices and narrow widths using responsive device toolbar.

Performance: Only include necessary Bootstrap JS;