Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Installation
Multiple Ways: Choose the installation method that best fits your project.
Installation Methods
Method 1: CDN (Quickest)
Use Bootstrap via Content Delivery Network - no download required.
CSS CDN Link
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">JS Bundle CDN (with Popper)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>Complete HTML Template with CDN
<!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>Pros: Quick setup, no build process
Cons: No customization, dependent on CDN availability
Cons: No customization, dependent on CDN availability
Method 2: NPM (Recommended for React/Next.js)
Install via NPM
npm install bootstrap@5For Next.js (_app.js)
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import('bootstrap/dist/js/bootstrap.bundle.min.js');
}, []);
return <Component {...pageProps} />;
}
export default MyApp;For Create React App
// src/index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);Pros: Full customization, SCSS access, tree-shaking
Cons: Requires build process
Cons: Requires build process
Method 3: Download Compiled Files
Download compiled CSS and JS files from the official website.
Download Bootstrap 5Folder Structure After Download
bootstrap-5.3.0/
├── css/
│ ├── bootstrap.min.css
│ └── bootstrap.css
├── js/
│ ├── bootstrap.bundle.min.js
│ └── bootstrap.bundle.js
└── scss/ (source files)HTML Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Local</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>Verify Installation
Create this test file to verify Bootstrap is working:
This is a Bootstrap alert!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
<div class="alert alert-info mt-3">This is a Bootstrap alert!</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common Installation Issues
| Issue | Solution |
|---|---|
| JavaScript components not working | Ensure bootstrap.bundle.min.js is loaded (includes Popper) |
| CSS not applying | Check CSS link path and network tab |
| jQuery errors | Bootstrap 5 doesn't require jQuery - remove jQuery references |
| Responsive issues | Add viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> |
What's Next?
After successful installation, explore these topics:
