📋 Table of Contents

• Session Overview
• Learning Objectives
• Core Concepts
  • Bootstrap’s Grid System
  • Container Types
    • .container
    • .container-fluid
    • .container-{breakpoint} (fluid until breakpoint)
  • Responsive Breakpoints
  • Column Classes
    • Auto-layout Columns
    • Fixed-width Columns
    • Responsive Columns
  • Gutters (spacing between columns)
  • Auto column counts with row-cols-*
• Quick Test Scaffold (CDN)
• Hands-on Practice
  • Exercise 1: Basic Grid Layout
  • Exercise 2: Complex Responsive Layout
  • Exercise 3: Advanced Grid Techniques
• Bootstrap Grid Utilities
  • Alignment Utilities
  • Spacing Utilities
  • Responsive Utilities
• Common Pitfalls (read before practicing)
• Accessibility & Semantics
• Bootstrap Grid vs CSS Grid (When to use which?)
• Critical Reflection Prompts
  • Exploration
  • Reflection
  • Conceptualization
  • Production
  • Exhibition
• References & Further Reading
  • Official Documentation
  • Layout Theory
  • Performance & Best Practices

Bootstrap CSS: Layout Grid & Containers — Responsive Layout Architecture

Session Overview

This session dives deep into Bootstrap’s grid system and container architecture. Students will learn how to create responsive layouts using Bootstrap’s 12-column grid, understand breakpoints, and build flexible page structures that adapt seamlessly across devices.

Learning Objectives

• Master Bootstrap’s 12-column grid system
• Understand responsive breakpoints and their application
• Learn the difference between container types
• Build complex responsive layouts with proper structure

Core Concepts

Bootstrap’s Grid System

Bootstrap’s grid system is a mobile-first, flexbox-based layout system that uses a 12-column structure. It’s designed to be responsive and works with any screen size.

Key Features:

• 12-column system - Each row is divided into 12 equal-width columns
• Mobile-first - Designed for mobile devices first, then enhanced for larger screens
• Flexbox-based - Uses modern CSS flexbox for layout
• Responsive breakpoints - Automatically adapts to different screen sizes

Container Types

Bootstrap provides two main container types:

.container

• Fixed-width container with responsive margins
• Centered content with maximum width at each breakpoint
• Responsive padding that adjusts based on screen size

.container-fluid

• Full-width container that spans the entire viewport width
• No maximum width constraints
• Edge-to-edge content layout

.container-{breakpoint} (fluid until breakpoint)

• Behaves like .container-fluid below the breakpoint, then becomes fixed-width at and above it
• Variants: .container-sm (≥576px), .container-md (≥768px), .container-lg (≥992px), .container-xl (≥1200px), .container-xxl (≥1400px)

Example:

<div class="container-md">
	<div class="row">
		<div class="col">Fluid under 768px, fixed from md up</div>
	</div>
</div>

Responsive Breakpoints

Bootstrap uses a set of responsive breakpoints that correspond to common device sizes:

Column Classes

Bootstrap provides various column classes for different responsive behaviors:

Auto-layout Columns

<div class="row">
	<div class="col">Auto-sized column</div>
	<div class="col">Auto-sized column</div>
	<div class="col">Auto-sized column</div>
</div>

Fixed-width Columns

<div class="row">
	<div class="col-4">25% width</div>
	<div class="col-4">25% width</div>
	<div class="col-4">25% width</div>
</div>

Responsive Columns

<div class="row">
	<div class="col-sm-8 col-md-6">Responsive column</div>
	<div class="col-sm-4 col-md-6">Responsive column</div>
</div>

Gutters (spacing between columns)

• Use g-* to set both axes, gx-* for horizontal only, gy-* for vertical only (0..5)

<div class="container">
	<div class="row g-3">
		<div class="col"><div class="border p-3">A</div></div>
		<div class="col"><div class="border p-3">B</div></div>
		<div class="col"><div class="border p-3">C</div></div>
	</div>
</div>

Auto column counts with row-cols-*

Let the grid decide how many columns per row at each breakpoint.

<div class="container">
	<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
		<div class="col"><div class="border p-3">1</div></div>
		<div class="col"><div class="border p-3">2</div></div>
		<div class="col"><div class="border p-3">3</div></div>
		<div class="col"><div class="border p-3">4</div></div>
	</div>
</div>

Quick Test Scaffold (CDN)

Use this minimal HTML to test any example quickly (no build tools needed):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Bootstrap Grid Test</title>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
			crossorigin="anonymous" />
	</head>
	<body class="p-3">
		<!-- Paste exercise markup here -->
	</body>
</html>

Hands-on Practice

Exercise 1: Basic Grid Layout

Create a responsive layout using Bootstrap’s grid system:

<div class="container">
	<div class="row g-3">
		<main class="col-12 col-md-8">
			<h2>Main Content Area</h2>
			<p>2/3 width from md (≥768px), full width below.</p>
		</main>
		<aside class="col-12 col-md-4">
			<h3>Sidebar</h3>
			<p>1/3 width from md, stacks below on small screens.</p>
		</aside>
	</div>
</div>

Exercise 2: Complex Responsive Layout

Build a more complex layout with multiple sections:

<div class="container-fluid">
	<!-- Header -->
	<header class="row bg-primary text-white py-4">
		<div class="col-12">
			<h1 class="text-center">Portfolio Header</h1>
		</div>
	</header>

	<!-- Main Content -->
	<main class="row py-4 g-4">
		<!-- Hero Section -->
		<section class="col-lg-8">
			<div class="bg-light p-4 rounded h-100">
				<h2>Welcome to My Portfolio</h2>
				<p>This is a hero section that showcases my work and introduces visitors to my projects.</p>
			</div>
		</section>

		<!-- Sidebar -->
		<aside class="col-lg-4">
			<div class="bg-secondary text-white p-3 rounded h-100">
				<h3>About Me</h3>
				<p>Brief information about myself and my skills.</p>
			</div>
		</aside>
	</main>

	<!-- Projects Grid -->
	<section class="row">
		<div class="col-12 mb-3">
			<h2>My Projects</h2>
		</div>
		<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
			<div class="col">
				<div class="card h-100">
					<div class="card-body">
						<h5 class="card-title">Project 1</h5>
						<p class="card-text">Description of project 1.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card h-100">
					<div class="card-body">
						<h5 class="card-title">Project 2</h5>
						<p class="card-text">Description of project 2.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card h-100">
					<div class="card-body">
						<h5 class="card-title">Project 3</h5>
						<p class="card-text">Description of project 3.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card h-100">
					<div class="card-body">
						<h5 class="card-title">Project 4</h5>
						<p class="card-text">Description of project 4.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>

Exercise 3: Advanced Grid Techniques

Practice more advanced grid techniques:

<div class="container">
	<!-- Offset columns -->
	<div class="row">
		<div class="col-md-4 offset-md-4">
			<h3>Centered Content</h3>
			<p>This column is centered using the offset class.</p>
		</div>
	</div>

	<!-- Nested rows -->
	<div class="row">
		<div class="col-md-6">
			<h4>Section 1</h4>
			<div class="row">
				<div class="col-6"><p>Sub-column 1</p></div>
				<div class="col-6"><p>Sub-column 2</p></div>
			</div>
		</div>
		<div class="col-md-6">
			<h4>Section 2</h4>
			<p>Adjacent content with nested grid structure.</p>
		</div>
	</div>
</div>

Bootstrap Grid Utilities

Alignment Utilities

• .justify-content-start, .justify-content-center, .justify-content-end
• .align-items-start, .align-items-center, .align-items-end
• .text-center, .text-start, .text-end

Spacing Utilities

• .m-0 to .m-5 - Margins
• .p-0 to .p-5 - Padding
• .mt-3, .mb-3, .ms-3, .me-3 - Directional spacing

Responsive Utilities

• .d-none, .d-sm-block - Show/hide elements at different breakpoints
• .order-first, .order-last - Change column order

Common Pitfalls (read before practicing)

• Always place .col-* inside a .row. Don’t put columns directly under .container.
• Wrap rows inside a .container / .container-* / .container-fluid to get proper horizontal padding.
• Prefer g-* / gx-* / gy-* for gutters instead of ad-hoc padding on columns.
• Don’t mix Bootstrap grid and CSS Grid in the same row unless you’re very intentional.

Accessibility & Semantics

• Prefer <header>, <main>, <aside>, <footer> for region semantics.
• Keep a consistent heading hierarchy (h1 → h2 → h3).
• Use .img-fluid for images and provide meaningful alt text.
• Ensure card titles are proper headings for screen readers when cards are primary content.

Bootstrap Grid vs CSS Grid (When to use which?)

• Bootstrap grid (flexbox) excels at quick, conventional 12‑column responsive pages, spanning, and alignment.
• CSS Grid excels at two‑dimensional control (rows and columns), asymmetric/magazine layouts, and complex tracks.
• Rule of thumb: Bootstrap grid for standard responsive screens; CSS Grid for editorial/asymmetric compositions.

Critical Reflection Prompts

Exploration

• How does Bootstrap’s grid system compare to CSS Grid or Flexbox when building responsive layouts?
• What responsive behaviors surprised you most when testing different screen sizes?

Reflection

• How does the mobile-first approach affect your layout decisions compared to desktop-first design?
• In what ways does Bootstrap’s grid system embody principles of progressive enhancement?

Conceptualization

• How does the 12-column grid relate to traditional design principles like the golden ratio or rule of thirds?
• What are the accessibility implications of responsive grid layouts?

Production

• How might Bootstrap’s grid system scale for larger projects or teams?
• What are the performance implications of using Bootstrap’s grid versus custom CSS layouts?

Exhibition

• How will you demonstrate the responsive behavior of your grid layout to others?
• What alternative layout approaches could achieve similar responsive results?

References & Further Reading

Official Documentation

• Bootstrap Grid System
• Bootstrap Breakpoints
• CSS Grid Layout - MDN

Layout Theory

• Responsive Grid Systems: From 960.gs to Foundation to Bootstrap
• The History of Responsive Web Design
• Flexbox vs CSS Grid

Performance & Best Practices

• CSS Grid Performance
• Responsive Images
• Critical Path CSS

Next: S3 - Components & UI Patterns →