Bootstrap CSS: Setup & Fundamentals — PWA-Ready Development · Rubén Vega Balbás, PhD · UDIT, University of Design, Innovation and Technology

WEB ATELIER (UDIT) · Learning by doing, with theory, practice and shared reflection

Bootstrap CSS: Setup & Fundamentals — PWA-Ready Development

By Rubén Vega Balbás, PhD 2025-09-10

URL: https://ruvebal.github.io/web-atelier-udit/lessons/en/bootstrap/setup-and-fundamentals/

📋 Table of Contents

Bootstrap CSS: Setup & Fundamentals — PWA-Ready Development

Session Overview

This session introduces Bootstrap as a comprehensive framework for building responsive, mobile-first web applications. Students will learn the fundamentals of responsive web design, set up their development environment, and create their first responsive HTML page using Bootstrap.

Learning Objectives

  • Understand what Bootstrap is and why it’s valuable for web development
  • Learn the principles of responsive web design and mobile-first methodology
  • Set up a proper HTML5 document structure with Bootstrap integration
  • Practice creating responsive layouts that work across different screen sizes

Core Concepts

What is Bootstrap?

Bootstrap is the world’s most popular open-source framework for building responsive, mobile-first web applications. Created by Twitter developers, it provides a comprehensive collection of CSS classes, JavaScript components, and design patterns that help developers create consistent, professional-looking websites quickly.

Key Features:

  • Mobile-first responsive design - Built with mobile devices as the primary target
  • 12-column grid system - Flexible layout system for responsive designs
  • Pre-built components - Ready-to-use UI elements (buttons, forms, navigation, etc.)
  • Consistent styling - Standardized visual design across browsers
  • Extensive documentation - Comprehensive guides and examples

Responsive Web Design Fundamentals

Responsive Web Design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. The core principle is creating flexible layouts that adapt to different viewport sizes.

Key Principles:

  1. Fluid layouts - Use relative units (%, em, rem) instead of fixed pixels
  2. Flexible images - Images scale with their containers
  3. Media queries - CSS rules that apply based on device characteristics
  4. Progressive enhancement - Start with basic functionality and add enhancements

Mobile-First Design Philosophy

Mobile-first design is a methodology where we optimize web pages for mobile devices first, then progressively enhance the experience for larger screens. This approach ensures that:

  • Performance is prioritized - Mobile devices often have slower connections
  • Core content is emphasized - Essential information is visible on small screens
  • Progressive enhancement works naturally - Features are added for larger screens

Setup Instructions

The quickest way to get started is using Bootstrap’s CDN links. Add these to your HTML <head>:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Bootstrap JavaScript Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Option 2: npm Installation (For Production)

For professional development with build tools:

npm install bootstrap@5.3.0

Then import in your JavaScript:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

HTML5 Document Structure

Every Bootstrap project should start with proper HTML5 structure:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My Bootstrap Portfolio</title>
		<!-- Bootstrap CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Your content here -->

		<!-- Bootstrap JavaScript -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	</body>
</html>

Key Elements:

  • <!DOCTYPE html> - HTML5 doctype declaration
  • <meta name="viewport"> - Essential for mobile responsiveness
  • Proper semantic HTML structure
  • Bootstrap CSS loaded before custom styles
  • Bootstrap JS loaded at the end of <body>

Bootstrap Utility Classes: The Foundation of Rapid Development

Understanding Utility-First CSS

Bootstrap’s utility classes represent a utility-first approach to CSS that’s remarkably similar to Tailwind CSS. Instead of writing custom CSS for every styling need, you compose atomic, single-purpose classes to achieve exactly the design you want.

Key Philosophy:

  • Composability - Mix and match utilities for complex designs
  • Explicit styling - Every style decision is visible in HTML
  • Maintainability - Easy to find and modify styles by searching class names
  • Consistency - Systematic approach to spacing, colors, and typography

Core Utility Categories

1. Spacing Utilities (Most Essential)

Bootstrap provides systematic spacing using the pattern: {property}{direction}-{size}

<!-- Margins -->
<div class="m-0 m-1 m-2 m-3 m-4 m-5 m-auto">Margins from 0 to auto</div>
<div class="mt-3 mb-3 ms-3 me-3 mx-auto">Directional margins</div>

<!-- Padding -->
<div class="p-1 p-2 p-3 p-4 p-5">Padding scale</div>
<div class="pt-3 pb-3 ps-3 pe-3">Directional padding</div>

Spacing Scale:

  • 0 = 0rem (0px)
  • 1 = 0.25rem (4px)
  • 2 = 0.5rem (8px)
  • 3 = 1rem (16px)
  • 4 = 1.5rem (24px)
  • 5 = 3rem (48px)

2. Text Utilities

<div class="text-start text-center text-end">Text alignment</div>
<div class="text-primary text-secondary text-muted">Color utilities</div>
<div class="fw-bold fw-normal fst-italic">Font weight and style</div>
<div class="text-lowercase text-uppercase text-capitalize">Text transformation</div>

3. Background & Border Utilities

<div class="bg-primary bg-secondary bg-light bg-dark">Background colors</div>
<div class="bg-gradient">Gradient backgrounds</div>
<div class="border border-primary border-2 border-top-0">Border utilities</div>
<div class="rounded rounded-circle rounded-pill">Border radius</div>

4. Flexbox Utilities

<div class="d-flex d-inline-flex">Display flex</div>
<div class="flex-row flex-column flex-row-reverse">Flex direction</div>
<div class="justify-content-start justify-content-center justify-content-end">Justification</div>
<div class="align-items-start align-items-center align-items-end">Alignment</div>
<div class="flex-fill flex-grow-1 flex-shrink-0">Flex properties</div>

5. Display & Sizing Utilities

<div class="d-none d-block d-md-flex">Responsive display</div>
<div class="w-25 w-50 w-75 w-100 w-auto">Width utilities</div>
<div class="h-25 h-50 h-75 h-100 h-auto">Height utilities</div>
<div class="mw-100 mh-100">Max width/height</div>

Bootstrap vs Tailwind: Utility Philosophy

Similarities:

  • Both embrace utility-first CSS
  • Both provide atomic, single-purpose classes
  • Both enable rapid prototyping and composable styling
  • Both prioritize maintainability through explicit styling

Key Differences:

Aspect Bootstrap Tailwind
Scope Limited utility set for common needs Exhaustive utilities covering every CSS property
Naming Semantic (.bg-primary, .btn) Functional (.bg-blue-500, .p-4)
Customization Sass variables for theming Configurable design tokens
Learning Curve Gentler - fewer utilities to learn Steeper - many utilities to master
Bundle Size Smaller by default Larger unless purged

The Power of Composition

Here’s how utilities create complex layouts:

<!-- Complex card using only utilities -->
<article class="card border-0 shadow-sm mb-4">
	<div class="card-body p-4">
		<div class="d-flex align-items-start mb-3">
			<img src="avatar.jpg" class="rounded-circle me-3 flex-shrink-0" style="width: 48px; height: 48px;" alt="Author" />
			<div class="flex-grow-1">
				<h6 class="mb-1 fw-semibold">Article Title</h6>
				<p class="text-muted small mb-2">By Author Name • 5 min read</p>
				<div class="d-flex gap-2 flex-wrap">
					<span class="badge bg-primary">Technology</span>
					<span class="badge bg-secondary">Tutorial</span>
				</div>
			</div>
			<button class="btn btn-link p-0 text-muted ms-2" aria-label="More options">
				<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
					<!-- ... -->
				</svg>
			</button>
		</div>
		<p class="card-text text-muted lh-base mb-3">
			Article excerpt that demonstrates how utilities create consistent, maintainable layouts...
		</p>
		<div class="d-flex justify-content-between align-items-center">
			<div class="d-flex align-items-center gap-3 text-muted small">
				<span class="d-flex align-items-center gap-1">
					<span>👍</span>
					<span>42</span>
				</span>
				<span class="d-flex align-items-center gap-1">
					<span>💬</span>
					<span>8</span>
				</span>
			</div>
			<a href="/article" class="btn btn-primary btn-sm px-3 py-2">Read More</a>
		</div>
	</div>
</article>

Responsive Utility Pattern

Bootstrap’s responsive utilities use breakpoint prefixes:

<div class="text-sm-center text-md-start text-lg-end">
	<!-- Centered on small screens, left-aligned on medium+, right-aligned on large+ -->
</div>

<div class="d-none d-md-block d-lg-flex">
	<!-- Hidden on small, shown as block on medium, flexbox on large -->
</div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
	<!-- Full width on mobile, half on small tablets, third on medium, quarter on large -->
</div>

Utility Classes Best Practices

1. Start Simple, Build Complex

<!-- ❌ Too many utilities at once -->
<div class="card shadow-sm border-0 rounded p-4 m-3 bg-light text-center d-flex flex-column align-items-center">
	<!-- ✅ Build progressively -->
	<div class="card">
		<div class="card-body text-center">
			<!-- Add utilities as needed -->
		</div>
	</div>
</div>

2. Use Semantic HTML with Utilities

<!-- ✅ Good: Semantic structure + utility styling -->
<section class="py-5">
	<div class="container">
		<article class="card">
			<header class="card-header">
				<h2 class="card-title">Article Title</h2>
			</header>
			<div class="card-body">
				<p class="card-text">Content with proper semantic structure.</p>
			</div>
		</article>
	</div>
</section>

3. Leverage Responsive Utilities

<!-- Mobile-first responsive design -->
<div class="container-fluid">
	<div class="row">
		<div class="col-12 col-md-8 col-lg-9">
			<!-- Main content - stacks on mobile, 2/3 width on larger screens -->
		</div>
		<div class="col-12 col-md-4 col-lg-3">
			<!-- Sidebar - stacks on mobile, 1/3 width on larger screens -->
		</div>
	</div>
</div>

Hands-on Practice: Utility-First Design

Exercise 1: Build with Utilities Only

Create a complete card component using only utility classes:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Utility-First Bootstrap</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body class="bg-light">
		<div class="container py-5">
			<div class="row justify-content-center">
				<div class="col-lg-8">
					<!-- Hero Section -->
					<section class="text-center mb-5">
						<h1 class="display-4 fw-bold text-primary mb-3">Utility-First Bootstrap</h1>
						<p class="lead text-muted mb-4">Building responsive layouts with Bootstrap's utility classes</p>
						<div class="d-flex justify-content-center gap-3 flex-wrap">
							<button class="btn btn-primary px-4 py-2">Get Started</button>
							<button class="btn btn-outline-secondary px-4 py-2">Learn More</button>
						</div>
					</section>

					<!-- Feature Cards -->
					<div class="row g-4">
						<div class="col-md-6 col-lg-4">
							<article class="card h-100 border-0 shadow-sm hover:shadow-lg transition-all duration-300">
								<div class="card-body p-4 text-center">
									<div class="mb-3">
										<div
											class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center"
											style="width: 48px; height: 48px;">
											🚀
										</div>
									</div>
									<h5 class="card-title fw-semibold mb-3">Rapid Development</h5>
									<p class="card-text text-muted">Build complex layouts quickly without writing custom CSS.</p>
								</div>
							</article>
						</div>

						<div class="col-md-6 col-lg-4">
							<article class="card h-100 border-0 shadow-sm hover:shadow-lg transition-all duration-300">
								<div class="card-body p-4 text-center">
									<div class="mb-3">
										<div
											class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center"
											style="width: 48px; height: 48px;">
											📱
										</div>
									</div>
									<h5 class="card-title fw-semibold mb-3">Mobile-First</h5>
									<p class="card-text text-muted">Responsive design that works perfectly across all devices.</p>
								</div>
							</article>
						</div>

						<div class="col-md-6 col-lg-4">
							<article class="card h-100 border-0 shadow-sm hover:shadow-lg transition-all duration-300">
								<div class="card-body p-4 text-center">
									<div class="mb-3">
										<div
											class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center"
											style="width: 48px; height: 48px;">
											🎨
										</div>
									</div>
									<h5 class="card-title fw-semibold mb-3">Consistent Design</h5>
									<p class="card-text text-muted">Maintain design consistency across your entire project.</p>
								</div>
							</article>
						</div>
					</div>

					<!-- Call to Action -->
					<section class="text-center mt-5 p-5 bg-primary text-white rounded-3">
						<h2 class="fw-bold mb-3">Ready to Get Started?</h2>
						<p class="lead mb-4 opacity-75">Join thousands of developers using Bootstrap's utility-first approach.</p>
						<div class="d-flex justify-content-center gap-3">
							<a href="#" class="btn btn-light btn-lg px-4 py-2">View Documentation</a>
							<a href="#" class="btn btn-outline-light btn-lg px-4 py-2">Get Started</a>
						</div>
					</section>
				</div>
			</div>
		</div>

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

Exercise 2: Responsive Layout with Utilities

Practice responsive design using utility classes:

<div class="container-fluid">
	<!-- Responsive Header -->
	<header class="bg-primary text-white py-3 py-md-4 py-lg-5">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-12 col-md-8 col-lg-9">
					<h1 class="display-4 display-md-3 display-lg-2 fw-bold mb-0">Responsive Header</h1>
				</div>
				<div class="col-12 col-md-4 col-lg-3 text-md-end mt-3 mt-md-0">
					<button class="btn btn-light btn-lg px-4">Get Started</button>
				</div>
			</div>
		</div>
	</header>

	<!-- Main Content -->
	<main class="py-4 py-md-5">
		<div class="container">
			<div class="row g-4">
				<!-- Article Cards -->
				<div class="col-12 col-md-6 col-lg-4">
					<article class="card h-100 border-0 shadow-sm">
						<div class="card-body p-4">
							<div class="d-flex align-items-start mb-3">
								<div
									class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0"
									style="width: 40px; height: 40px;">
									📝
								</div>
								<div class="flex-grow-1">
									<h6 class="card-title fw-semibold mb-1">Article Title</h6>
									<p class="text-muted small mb-2">5 min read</p>
								</div>
							</div>
							<p class="card-text text-muted lh-base">
								Article description that adapts to different screen sizes using Bootstrap's responsive utilities.
							</p>
						</div>
					</article>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<article class="card h-100 border-0 shadow-sm">
						<div class="card-body p-4">
							<div class="d-flex align-items-start mb-3">
								<div
									class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0"
									style="width: 40px; height: 40px;">
									🎯
								</div>
								<div class="flex-grow-1">
									<h6 class="card-title fw-semibold mb-1">Tutorial</h6>
									<p class="text-muted small mb-2">10 min read</p>
								</div>
							</div>
							<p class="card-text text-muted lh-base">
								Step-by-step guide that demonstrates responsive layout techniques using utility classes.
							</p>
						</div>
					</article>
				</div>

				<div class="col-12 col-md-6 col-lg-4">
					<article class="card h-100 border-0 shadow-sm">
						<div class="card-body p-4">
							<div class="d-flex align-items-start mb-3">
								<div
									class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0"
									style="width: 40px; height: 40px;">
									💡
								</div>
								<div class="flex-grow-1">
									<h6 class="card-title fw-semibold mb-1">Tips & Tricks</h6>
									<p class="text-muted small mb-2">3 min read</p>
								</div>
							</div>
							<p class="card-text text-muted lh-base">
								Quick tips for mastering Bootstrap's utility-first approach to web development.
							</p>
						</div>
					</article>
				</div>

				<!-- Hidden on mobile, visible on larger screens -->
				<div class="col-12 col-lg-8 d-none d-lg-block">
					<div class="card border-0 bg-light">
						<div class="card-body p-4">
							<h5 class="card-title mb-3">Sidebar Content</h5>
							<p class="card-text">
								This sidebar content is hidden on mobile devices to prioritize main content, then appears on large screens using
								Bootstrap's responsive display utilities.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>

	<!-- Footer -->
	<footer class="bg-dark text-white py-4">
		<div class="container text-center">
			<p class="mb-2">&copy; 2024 Bootstrap Utilities Demo. Built with utility classes.</p>
			<div class="d-flex justify-content-center gap-3">
				<a href="#" class="text-white text-decoration-none">Privacy</a>
				<a href="#" class="text-white text-decoration-none">Terms</a>
				<a href="#" class="text-white text-decoration-none">Support</a>
			</div>
		</div>
	</footer>
</div>

Exercise 3: Custom Utility Extensions

Create custom utilities that extend Bootstrap’s system:

// custom-utilities.scss
/* custom-utilities.css */
/* You should link this file AFTER Bootstrap's CSS in your HTML:
   <link rel="stylesheet" href="bootstrap.min.css">
   <link rel="stylesheet" href="custom-utilities.css">
*/
.bg-gradient-primary {
	background: linear-gradient(135deg, var(--bs-primary) 0%, darken($primary, 15%) 100%);
}

// Custom spacing
.spacer-xs {
	height: 0.5rem;
}
.spacer-sm {
	height: 1rem;
}
.spacer-md {
	height: 2rem;
}
.spacer-lg {
	height: 4rem;
}

// Custom text utilities
.text-gradient {
	background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

// Glass morphism effect
.glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

<!-- Using custom utilities -->
<div class="card glass p-4">
	<h3 class="text-gradient mb-3">Glass Morphism Card</h3>
	<p class="mb-0">Custom utility classes extending Bootstrap's system.</p>
</div>

<div class="d-flex align-items-center gap-3">
	<div class="spacer-md"></div>
	<div class="bg-primary text-white px-3 py-2 rounded">Content</div>
	<div class="spacer-md"></div>
</div>

Utility-First vs Component-First

When to use utilities:

  • Rapid prototyping - Quick layout experimentation
  • Simple, one-off styling - When you don’t need reusable components
  • Responsive adjustments - Fine-tuning layouts across breakpoints
  • Performance optimization - Only include styles you actually use

When to use components:

  • Reusable UI patterns - Buttons, cards, navigation that appear multiple times
  • Complex interactions - Components with JavaScript behavior
  • Brand consistency - Standardized design elements
  • Maintainability - When you need to update styling across many instances

Performance Considerations

Utility Class Benefits:

  • Smaller bundle size - Only include utilities you use (with purging)
  • Better caching - Utilities are more likely to be reused across pages
  • Easier maintenance - No custom CSS to maintain

Potential Drawbacks:

  • HTML verbosity - Many classes can make markup harder to read
  • Learning curve - Requires memorizing utility patterns
  • Bundle bloat - Including unused utilities increases CSS size

Summary: Bootstrap Utility-First Foundation

Key Takeaways

You’ve now learned:

  • Utility-first philosophy - Bootstrap’s approach to rapid, composable styling
  • Systematic spacing - Consistent design tokens for margins, padding, and layout
  • Responsive utilities - Mobile-first responsive design patterns
  • Typography & color systems - Consistent text and color utilities
  • Flexbox utilities - Modern layout utilities for complex designs

Bootstrap’s utility system provides:

  • Rapid prototyping - Build complex layouts without custom CSS
  • Consistent design - Systematic approach to spacing and styling
  • Maintainable code - Easy to find and modify styles in HTML
  • Performance optimization - Only include utilities you actually use

Next Steps

With this utility-first foundation, you’re ready to:

  1. Build complex layouts using Bootstrap’s grid and utility system
  2. Create reusable components with consistent styling patterns
  3. Customize Bootstrap with Sass variables and custom utilities
  4. Add interactivity using Bootstrap’s JavaScript components

The utility-first approach you’ve learned here will serve as the foundation for all your Bootstrap development, enabling rapid, maintainable, and scalable web applications.

Critical Reflection Prompts

Exploration

  • Which aspects of Bootstrap’s setup process were most intuitive versus confusing?
  • How did testing responsive behavior change your understanding of mobile-first design?

Reflection

  • What assumptions did you have about responsive design before this session?
  • How does Bootstrap’s approach to responsive design compare to building from scratch?

Conceptualization

  • How does mobile-first design relate to accessibility and inclusive design principles?
  • In what ways does using a framework like Bootstrap embody “design as code”?

Production

  • How might Bootstrap’s approach to responsive design scale for larger projects or teams?
  • What are the trade-offs between using a framework versus building responsive layouts from scratch?

Exhibition

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

References & Further Reading

Official Documentation

Additional Resources

Next: S2 - Layout Grid & Containers →