Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Basic Template
A proper HTML template is essential for Bootstrap to work correctly.
Minimum Required Template
Complete Bootstrap 5 Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Template</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">MyApp</a>
</div>
</nav>
<div class="container mt-4">
<h1>Welcome to Bootstrap 5</h1>
<p class="lead">Build responsive, mobile-first projects.</p>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Template Breakdown
HTML5 Doctype
<!DOCTYPE html>Required for proper rendering in modern browsers.
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">Essential for responsive design on mobile devices.
Bootstrap CSS
Always load Bootstrap CSS in the <head> section:
<link href="bootstrap.min.css" rel="stylesheet">Bootstrap JS
Load Bootstrap JS before closing </body>:
<script src="bootstrap.bundle.min.js"></script>Using .bundle includes Popper.js for tooltips and popovers.
Enhanced Templates
Template with Navbar & Footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enhanced Bootstrap Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-bootstrap"></i> MyApp
</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="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="container my-5">
<div class="row">
<div class="col-md-8">
<h1>Welcome to Bootstrap 5</h1>
<p class="lead">Build responsive, mobile-first projects.</p>
<button class="btn btn-primary">Get Started</button>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Sidebar</h5>
<p class="card-text">Additional content here.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-4 mt-5">
<div class="container text-center">
<p>© 2023 MyApp. All rights reserved.</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common Containers
.container
Responsive fixed-width container
Container Content
.container-fluid
Full width container
Fluid Container
Breakpoint Containers
.container-sm.container-md.container-lg.container-xl.container-xxl
Template Examples
Simple Blog Template
<header class="bg-light py-3">
<div class="container">
<h1>My Blog</h1>
</div>
</header>
<main class="container py-4">
<div class="row">
<div class="col-lg-8">
<article class="card mb-3">
<div class="card-body">
<h2>Blog Post Title</h2>
<p>Content goes here...</p>
</div>
</article>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5>Sidebar</h5>
</div>
</div>
</div>
</div>
</main>Dashboard Template
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<nav class="col-md-2 bg-dark text-white min-vh-100">
<div class="p-3">Sidebar</div>
</nav>
<!-- Main Content -->
<main class="col-md-10 p-4">
<h1>Dashboard</h1>
<div class="row">
<div class="col-md-3">
<div class="card bg-primary text-white">
<div class="card-body">Card 1</div>
</div>
</div>
<!-- More cards... -->
</div>
</main>
</div>
</div>Important Notes
- Always include the viewport meta tag for responsiveness
- Load CSS in head, JS before closing body tag
- Use
.containeror.container-fluidfor proper layout - Consider using Bootstrap Icons for consistent icons
