Bootstrap CSS: Components & UI Patterns — Reusable Component Library · 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: Components & UI Patterns — Reusable Component Library

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

URL: https://ruvebal.github.io/web-atelier-udit/lessons/en/bootstrap/components-navbar-cards/

📋 Table of Contents

Bootstrap CSS: Components & UI Patterns — Reusable Component Library

Session Overview

This session explores Bootstrap’s component ecosystem and UI patterns. Students will learn to use pre-built, accessible components like navigation bars, cards, buttons, and forms to create consistent, professional interfaces quickly and efficiently.

Learning Objectives

  • Master Bootstrap’s component library (navbar, cards, buttons, forms)
  • Understand component composition and reusability
  • Learn to create consistent UI patterns across projects
  • Practice semantic HTML with Bootstrap styling

Core Concepts

Bootstrap Component Philosophy

Bootstrap provides a comprehensive set of pre-built, reusable components that follow consistent design patterns. Each component is:

  • Accessible by default - Built with ARIA attributes and keyboard navigation
  • Responsive - Works across all device sizes
  • Customizable - Can be themed and extended
  • Well-documented - Clear usage examples and API documentation

Component Categories

Bootstrap components fall into several categories:

  1. Layout Components - Structure page content
  2. Navigation Components - Help users move through content
  3. Content Components - Display information
  4. Form Components - Collect user input
  5. Feedback Components - Show system status

Essential Components

The navbar is Bootstrap’s most commonly used component for site navigation:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<div class="container">
		<a class="navbar-brand" href="#">Brand</a>

		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav ms-auto">
				<li class="nav-item">
					<a class="nav-link active" href="#">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">About</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Projects</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Contact</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

Key Features:

  • Responsive collapse - Automatically collapses on mobile
  • Brand positioning - Logo or site name placement
  • Navigation alignment - Left, center, or right positioning
  • Dropdown support - Multi-level navigation menus

Cards

Cards are flexible content containers for displaying related information:

<div class="card">
	<img src="https://picsum.photos/300/200?random=1" class="card-img-top" alt="Project image" />
	<div class="card-body">
		<h5 class="card-title">Project Title</h5>
		<p class="card-text">Brief description of the project and its key features.</p>
		<a href="#" class="btn btn-primary">View Project</a>
	</div>
</div>

Card Variations:

  • Card groups - .card-group for equal-height cards
  • Card decks - .card-deck for responsive card layouts
  • Card columns - .card-columns for Pinterest-style layouts

Buttons

Bootstrap provides consistent button styling with multiple variants:

<!-- Button variants -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<!-- Outline buttons -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Button sizes -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Forms

Bootstrap forms provide consistent styling and validation states:

<form>
	<div class="mb-3">
		<label for="email" class="form-label">Email address</label>
		<input type="email" class="form-control" id="email" placeholder="Enter email" />
		<div class="form-text">We'll never share your email with anyone else.</div>
	</div>

	<div class="mb-3">
		<label for="password" class="form-label">Password</label>
		<input type="password" class="form-control" id="password" />
	</div>

	<div class="mb-3 form-check">
		<input type="checkbox" class="form-check-input" id="remember" />
		<label class="form-check-label" for="remember">Remember me</label>
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Hands-on Practice

Exercise 1: Complete Portfolio Layout

Create a comprehensive portfolio page using Bootstrap components:

<!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>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Navigation -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
			<div class="container">
				<a class="navbar-brand" href="#">Portfolio</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav ms-auto">
						<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
						<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
						<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
						<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<!-- Hero Section -->
		<section id="home" class="bg-primary text-white py-5">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-lg-6">
						<h1 class="display-4">Welcome to My Portfolio</h1>
						<p class="lead">I'm a web developer passionate about creating beautiful and functional websites.</p>
						<a href="#projects" class="btn btn-light btn-lg">View My Work</a>
					</div>
					<div class="col-lg-6">
						<img src="https://picsum.photos/600/400?random=hero" class="img-fluid rounded" alt="Hero image" />
					</div>
				</div>
			</div>
		</section>

		<!-- About Section -->
		<section id="about" class="py-5">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 mx-auto text-center">
						<h2>About Me</h2>
						<p class="lead">I specialize in responsive web design and modern front-end development.</p>
						<div class="row mt-4">
							<div class="col-md-4">
								<div class="card border-0 bg-light">
									<div class="card-body text-center">
										<h3>Responsive Design</h3>
										<p>Creating websites that work beautifully on all devices.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="card border-0 bg-light">
									<div class="card-body text-center">
										<h3>Clean Code</h3>
										<p>Writing maintainable and semantic HTML/CSS.</p>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="card border-0 bg-light">
									<div class="card-body text-center">
										<h3>Performance</h3>
										<p>Optimizing for fast loading and great user experience.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- Projects Section -->
		<section id="projects" class="py-5 bg-light">
			<div class="container">
				<h2 class="text-center mb-5">My Projects</h2>
				<div class="row">
					<div class="col-lg-4 mb-4">
						<div class="card h-100">
							<img src="https://picsum.photos/400/250?random=1" class="card-img-top" alt="Project 1" />
							<div class="card-body">
								<h5 class="card-title">E-commerce Site</h5>
								<p class="card-text">A responsive e-commerce platform built with modern web technologies.</p>
								<a href="#" class="btn btn-primary">View Details</a>
							</div>
						</div>
					</div>
					<div class="col-lg-4 mb-4">
						<div class="card h-100">
							<img src="https://picsum.photos/400/250?random=2" class="card-img-top" alt="Project 2" />
							<div class="card-body">
								<h5 class="card-title">Portfolio CMS</h5>
								<p class="card-text">Content management system for creative professionals.</p>
								<a href="#" class="btn btn-primary">View Details</a>
							</div>
						</div>
					</div>
					<div class="col-lg-4 mb-4">
						<div class="card h-100">
							<img src="https://picsum.photos/400/250?random=3" class="card-img-top" alt="Project 3" />
							<div class="card-body">
								<h5 class="card-title">Mobile App</h5>
								<p class="card-text">Progressive web app for task management and productivity.</p>
								<a href="#" class="btn btn-primary">View Details</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- Contact Form -->
		<section id="contact" class="py-5">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-lg-6">
						<h2 class="text-center mb-4">Get In Touch</h2>
						<form>
							<div class="mb-3">
								<label for="name" class="form-label">Name</label>
								<input type="text" class="form-control" id="name" required />
							</div>
							<div class="mb-3">
								<label for="email" class="form-label">Email</label>
								<input type="email" class="form-control" id="email" required />
							</div>
							<div class="mb-3">
								<label for="message" class="form-label">Message</label>
								<textarea class="form-control" id="message" rows="4" required></textarea>
							</div>
							<div class="d-grid">
								<button type="submit" class="btn btn-primary">Send Message</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</section>

		<!-- Footer -->
		<footer class="bg-dark text-white py-4">
			<div class="container text-center">
				<p>&copy; 2024 My Portfolio. Built with Bootstrap.</p>
			</div>
		</footer>

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

Exercise 2: Component Variations

Practice different component variations and styling:

<div class="container my-5">
	<!-- Button Groups -->
	<div class="btn-group mb-4" role="group">
		<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked />
		<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

		<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" />
		<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

		<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" />
		<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
	</div>

	<!-- Card with Header and Footer -->
	<div class="card">
		<div class="card-header">
			<h4 class="card-title">Featured Project</h4>
		</div>
		<div class="card-body">
			<p class="card-text">This project showcases advanced Bootstrap techniques.</p>
			<a href="#" class="btn btn-primary">Learn More</a>
		</div>
		<div class="card-footer text-muted">Last updated 3 days ago</div>
	</div>

	<!-- Alert Components -->
	<div class="alert alert-success mt-4" role="alert">
		<h4 class="alert-heading">Well done!</h4>
		<p>You've successfully created a Bootstrap component layout.</p>
	</div>
</div>

Component Best Practices

Accessibility Considerations

  • Semantic HTML - Use proper heading hierarchy and landmark elements
  • ARIA attributes - Bootstrap components include appropriate ARIA labels
  • Keyboard navigation - All interactive components are keyboard accessible
  • Color contrast - Ensure sufficient contrast ratios for text readability

Performance Optimization

  • Selective component loading - Only include components you actually use
  • CSS optimization - Remove unused Bootstrap CSS for smaller bundle sizes
  • Image optimization - Use responsive images with proper alt text

Customization Guidelines

  • CSS custom properties - Use Bootstrap’s CSS custom properties for theming
  • Sass variables - Override default variables before compilation
  • Component extension - Extend existing components rather than completely rewriting

Critical Reflection Prompts

Exploration

  • Which Bootstrap components were most intuitive to implement versus those that required more experimentation?
  • How did using pre-built components affect your creative process compared to building from scratch?

Reflection

  • In what ways do Bootstrap components embody principles of progressive enhancement?
  • How does component reusability relate to maintainability in larger projects?

Conceptualization

  • How do Bootstrap’s design patterns relate to established UI/UX design principles?
  • What are the accessibility implications of using pre-built component libraries?

Production

  • How might Bootstrap components scale for enterprise-level applications?
  • What are the trade-offs between using a component library versus building custom components?

Exhibition

  • How will you demonstrate the consistency and professionalism of your Bootstrap component usage?
  • What alternative component approaches could achieve similar design consistency?

References & Further Reading

Official Documentation

Component Design Theory

Accessibility & Best Practices

Next: S4 - CSS Customization & Sass →