Bootstrap is the world’s most popular CSS framework. It provides ready-made components and a utility class system that lets you build a decent UI without writing CSS from scratch. For a Python developer who needs a working interface quickly, Bootstrap is a logical first step.
Connecting via CDN
No installation needed. Add the CSS link in <head> and the script before </body>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Your HTML -->
<!-- Bootstrap JS (needed for modals, dropdowns, etc.) -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
Containers
Bootstrap builds everything around containers — they constrain content width and centre it:
<!-- Fixed maximum width with responsive breakpoints -->
<div class="container">
Content no wider than 1320px on large screens
</div>
<!-- Always full screen width -->
<div class="container-fluid">
Content at 100% width
</div>
<!-- Full width up to a breakpoint, then fixed -->
<div class="container-md">
100% below md, fixed above
</div>
Spacing utilities
Bootstrap provides margin and padding classes using the formula {property}{side}-{size}:
- Properties:
m(margin),p(padding) - Sides:
t(top),b(bottom),s(start/left),e(end/right),x(horizontal),y(vertical) - Sizes:
0,1,2,3,4,5,auto
<!-- Margins -->
<div class="mt-3">margin-top: 1rem</div>
<div class="mb-4">margin-bottom: 1.5rem</div>
<div class="mx-auto">centre horizontally</div>
<div class="my-5">margin top and bottom: 3rem</div>
<!-- Padding -->
<div class="p-3">padding: 1rem on all sides</div>
<div class="px-4 py-2">padding-x: 1.5rem, padding-y: 0.5rem</div>
<div class="ps-3">padding-start (left): 1rem</div>
The base unit (1) equals 0.25rem. The scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem.
Colour utilities
<!-- Text colour -->
<p class="text-primary">Blue (primary)</p>
<p class="text-secondary">Grey</p>
<p class="text-success">Green</p>
<p class="text-danger">Red</p>
<p class="text-warning">Yellow</p>
<p class="text-muted">Muted</p>
<p class="text-dark">Dark</p>
<!-- Background colour -->
<div class="bg-primary text-white">Blue background</div>
<div class="bg-light">Light grey background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-success text-white">Green background</div>
Display utilities
<!-- Flexbox -->
<div class="d-flex">flex container</div>
<div class="d-flex justify-content-between">space-between</div>
<div class="d-flex align-items-center">vertically centred</div>
<div class="d-flex gap-3">gap between children</div>
<div class="d-flex flex-column">vertical flex</div>
<!-- Show / hide -->
<div class="d-none">always hidden</div>
<div class="d-none d-md-block">hidden below md, block above</div>
<div class="d-md-none">visible only below md</div>
Buttons
Bootstrap provides a full set of button variants:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-outline-primary">Outline primary</button>
<button class="btn btn-outline-secondary">Outline secondary</button>
<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
<!-- Full width -->
<button class="btn btn-primary w-100">Full width</button>
<!-- Works on <a> too -->
<a href="/posts/" class="btn btn-outline-primary">All articles</a>
Typography utilities
<p class="text-start">Left aligned</p>
<p class="text-center">Centred</p>
<p class="text-end">Right aligned</p>
<p class="fw-bold">Bold</p>
<p class="fw-normal">Normal weight</p>
<p class="fst-italic">Italic</p>
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-6">Font size 6 (smallest)</p>
<p class="text-uppercase">ALL CAPS</p>
<p class="text-truncate" style="max-width: 200px;">Long text gets clipped</p>
Example: DevBlog header with Bootstrap
<header class="bg-dark text-white py-3">
<div class="container d-flex justify-content-between align-items-center">
<a href="/" class="text-white text-decoration-none fw-bold fs-4">
DevBlog
</a>
<nav>
<ul class="list-unstyled d-flex gap-3 mb-0">
<li><a href="/posts/" class="text-white text-decoration-none">Articles</a></li>
<li><a href="/about/" class="text-white text-decoration-none">About</a></li>
<li>
<a href="/contact/" class="btn btn-outline-light btn-sm">
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
Bootstrap is great for getting started and prototyping. As a project grows, many developers move to custom CSS or Tailwind. But understanding Bootstrap is a useful foundation — it’s built on the same flexbox and media queries you’re learning in other articles.
💬 Comments (0)
No comments yet
Be the first to share your opinion about this article!