Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Introduction
Note: Bootstrap 5 is the latest version of the world's most popular front-end framework.
What is Bootstrap?
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
Key Features
- Responsive grid system
- Pre-built components
- Powerful JavaScript plugins
- Extensive utility classes
- Cross-browser compatibility
Quick Example
Basic Bootstrap 5 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>Bootstrap 5 vs Bootstrap 4
| Feature | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| jQuery | Required | Removed |
| IE Support | Yes | No |
| Grid System | Flexbox | Enhanced |
Next Steps
Now that you understand what Bootstrap is, let's proceed to installation.
Next: Installation →