Website Markup with Bootstrap
Bootstrap is the most widespread CSS framework with ready-to-use component library. Used where speed matters, design requirements are minimal, and broad browser support is needed. Bootstrap 5 removed jQuery dependency, transitioned to CSS Custom Properties and RTL support.
Installing Bootstrap 5
Via npm (recommended)
npm install bootstrap @popperjs/core
// src/styles/main.scss
// 1. Override variables BEFORE importing Bootstrap
$primary: #2563eb;
$secondary: #6b7280;
$border-radius: 0.5rem;
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;
$enable-smooth-scroll: true;
// 2. Import Bootstrap
@import "bootstrap/scss/bootstrap";
// 3. Your custom styles on top
// main.ts — import only needed JS components
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/collapse';
// Don't import entire bootstrap.bundle.js — wastes 15+ KB
Customization via SCSS Variables
Bootstrap uses Sass variables and maps for complete customization without modifying source:
// Color palette
$theme-colors: (
"primary": #2563eb,
"secondary": #6b7280,
"success": #16a34a,
"danger": #dc2626,
"warning": #d97706,
"info": #0891b2,
"light": #f9fafb,
"dark": #111827,
);
// Grid
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px,
xxl: 1536px,
);
// Container max widths
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px,
xxl: 1400px,
);
// Spacing (spacer = 1rem)
$spacers: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 0.75rem,
4: 1rem,
5: 1.5rem,
6: 2rem,
);
Typical Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Title</title>
<link rel="stylesheet" href="/assets/main.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="/">Logo</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/services">Services</a></li>
<li class="nav-item">
<a class="btn btn-primary btn-sm" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section class="py-9 py-lg-10 bg-light">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h1 class="display-4 fw-bold mb-4">Hero Section Title</h1>
<p class="lead text-secondary mb-5">
Subtitle with value proposition description.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/start" class="btn btn-primary btn-lg">Get Started</a>
<a href="/demo" class="btn btn-outline-secondary btn-lg">Demo</a>
</div>
</div>
<div class="col-lg-6">
<img src="/img/hero.webp" alt="Hero" class="img-fluid rounded-3 shadow" />
</div>
</div>
</div>
</section>
<!-- Cards -->
<section class="py-7">
<div class="container">
<h2 class="text-center fw-semibold mb-6">Our Services</h2>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-5">
<div class="mb-4 text-primary fs-1">
<i class="bi bi-code-slash"></i>
</div>
<h3 class="card-title h5 fw-semibold">Development</h3>
<p class="card-text text-secondary">Service description.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="/assets/main.js"></script>
</body>
</html>
Bootstrap Icons
npm install bootstrap-icons
// In main.scss
@import "bootstrap-icons/font/bootstrap-icons";
Or SVG inline:
<svg class="bi text-primary" width="24" height="24" fill="currentColor">
<use href="/node_modules/bootstrap-icons/bootstrap-icons.svg#shield-check" />
</svg>
Using Bootstrap in React
// Use react-bootstrap instead of data-bs-* attributes
import { Modal, Button, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const ContactModal = ({ show, onHide }) => (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Contact Us</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="[email protected]" />
</Form.Group>
<Button type="submit" variant="primary" className="w-100">Send</Button>
</Form>
</Modal.Body>
</Modal>
);
Bundle Size Optimization
Default Bootstrap CSS is about 180 KB. Import only needed modules:
// Minimal set
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities/api";
// Add as needed:
// @import "bootstrap/scss/buttons";
// @import "bootstrap/scss/nav";
// @import "bootstrap/scss/card";
// @import "bootstrap/scss/modal";
Timelines
Bootstrap setup with SCSS customization: 2–3 hours. Landing page: 1–1.5 days. Multi-page corporate site: 3–5 days. Bootstrap accelerates markup for standard elements (forms, tables, modals) via ready components.