Module 1 : Introduction to Bootstrap
Origin & goal
Bootstrap began as an internal UI toolkit to bring consistency to Twitter's internal tools. Its core goal was to provide a fast, consistent, and reusable front-end layer.
Why Bootstrap matters
Rapid prototyping: A large set of pre-built components speeds the path from idea -> prototype.
Opinionated defaults: sensible typographic scale, spacing, and components that reduce design time.
Responsive-first: grid and utilities focused on responsive layouts from mobile upward.
Evolution highlights
Early versions focused on base CSS components and a 12-column grid.
Recent major versions modernized internals (flexbox-based grid since v4), dropped legacy browser support (e.g., IE), and removed jQuery as a hard dependency in v5, moving to native JS for interactive components.
Getting started
CDN (fast demo / class use):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Starter</title>
<!-- CSS: Bootstrap CDN (production) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.x/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1 class="display-5">Hello, Bootstrap!</h1>
<p class="lead">Starter template.</p>
</div>
<!-- JS: Bootstrap bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.x/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
npm (project use, allows Sass/JS customization):
npm init -y
npm install bootstrap@5
# optionally install sass for compiling custom SCSS
npm install -D sass
Then import in your SCSS entry file:
// _custom.scss - override variables before importing Bootstrap
$theme-colors: ("primary": #2c7be5, "danger": #e55353);
@import "node_modules/bootstrap/scss/bootstrap";
Layout & Grid
Core concepts:
Container: centers and sets horizontal padding (.container, .container-fluid, and responsive variants container-md).
Row: a flex container for columns. Always place .col-* inside .row.
Columns: .col-, .col-sm-, .col-md-, .col-lg-, .col-xl- and now xxl / responsive tiers depending on Bootstrap version.
Grid is 12 columns; column widths are fractions of 12, and you can mix fixed + auto columns.
Mechanics (why it works):
Rows use negative margins to offset container padding; columns have horizontal padding (gutter).
Under the hood Bootstrap uses Flexbox for alignment, wrapping, and ordering.
Basic example:
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
Advanced tips:
Use responsive utilities like order-md-2 to rearrange columns on different breakpoints.
Use g- classes to control gutters: g-0, g-2, gx-3, gy-1.
Buttons
<button class="btn btn-primary">Primary</button>
<a class="btn btn-outline-secondary" href="#">Secondary</a>
Navbar (responsive)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
Cards
<div class="card" style="width: 18rem;">
<img src="/path/to/img.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
Modal (declarative activation)
<!-- Trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Modal body text here.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
JavaScript API (vanilla):
// Initialize modal programmatically
import { Modal } from 'bootstrap';
const el = document.getElementById('exampleModal');
const modal = new Modal(el);
modal.show();
Utilities & responsive
Utility-first thinking: Bootstrap includes many ready-to-use utility classes covering spacing (m-, p-), display, flexbox, colors, text alignment, and responsive variants.
Examples:
mt-3 — margin-top.
d-flex / d-md-none — display utilities.
text-truncate — single-line truncation.
Using utilities for rapid prototyping:
Instead of writing custom CSS for alignment, compose utility classes (d-flex, align-items-center, justify-content-between).
Theming & Customization (Sass & CSS variables)
Where to override
Overriding Sass variables before you import Bootstrap's main SCSS is the recommended method.
Bootstrap exposes many variables for colors, breakpoints, components, and utilities.
Sample _theme.scss flow:
// 1) Variables & maps
$primary: #0d6efd;
$body-bg: #fff;
// 2) Optionally configure maps like $theme-colors
$theme-colors: (
"primary": $primary,
"danger": #dc3545,
);
// 3) Import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
CSS variables
Modern Bootstrap also exposes CSS custom properties for easier time theming; these can be toggled via :root or a .theme-dark wrapper for theme switching.
Utility API (advanced)
Some Bootstrap releases include a Utility API that lets you generate utility classes from Sass maps, reducing repetitive code.
Accessibility considerations with Bootstrap:
Many components provide accessible markup by default (aria attributes, keyboard support) but developers must ensure:
Proper aria-* attributes when components are used in nonstandard ways.
Focus management in single-page apps when showing/hiding content.
Color contrast (custom themes may break default accessible contrast — test with tools).
Testing:
Use Lighthouse, axe-core, or WAVE to audit component pages.
Performance & production tips
Use only the components you need: import Bootstrap’s SCSS modularly and avoid including unused CSS.
Minify CSS/JS and enable gzip/brotli on servers.
Leverage CDN for static assets when appropriate.
When using many utilities, consider purging unused your build tool (careful with dynamic class names).
Migration notes (v4 -> v5 highlights)
jQuery removed from core JS — plugin code changed to vanilla JS; data attribute names changed to data-bs-*.
Some class names changed or were removed (e.g., utility class variations). Consult migration guide when upgrading projects.
Build a responsive landing page with a hero, three feature cards, and a footer. Steps:
Create basic HTML skeleton and include Bootstrap via CDN.
Add a .container
No comments:
Post a Comment