Bootstrap Installation & Usage
Installation Methods
Bootstrap provides multiple installation and usage methods. You can choose the most suitable approach based on your project requirements.
1. CDN Method (Recommended for Beginners)
This is the simplest and quickest method, directly including CDN links in your HTML file.
Basic Template
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>This is a Bootstrap example page.</p>
</div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CDN Advantages
- No need to download files
- Automatically get the latest version
- Utilize CDN caching for faster loading
- Suitable for rapid prototyping
2. Download Files Method
Download compiled files from the Bootstrap official website to your local project.
Download Steps
- Visit Bootstrap Official Website
- Click the "Download" button
- Download the compiled version (Compiled CSS and JS)
- Extract files to your project directory
File Structure
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
└── bootstrap.bundle.min.js.mapIncluding Local Files
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Local Files</title>
<!-- Local Bootstrap CSS -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Page content -->
<!-- Local Bootstrap JavaScript -->
<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>3. npm Package Manager
Suitable for projects using build tools.
Installation Command
bash
npm install bootstrapUsing in Project
javascript
// Import CSS
import 'bootstrap/dist/css/bootstrap.min.css';
// Import JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';4. Yarn Package Manager
bash
yarn add bootstrapImportant HTML Settings
1. HTML5 Document Type
html
<!DOCTYPE html>2. Responsive Meta Tag
html
<meta name="viewport" content="width=device-width, initial-scale=1">This tag ensures the page displays correctly on mobile devices.
3. Box-sizing Setting
Bootstrap uses box-sizing: border-box, ensuring element width and height include padding and borders.
Complete Starter Template
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Starter Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
</div>
</nav>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Welcome to Bootstrap</h1>
<p class="lead">This is a responsive webpage built with Bootstrap.</p>
<button type="button" class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Verify Installation
Create the above HTML file and open it in a browser. If you see:
- Page using Bootstrap's default fonts
- Buttons with Bootstrap styling
- Responsive display on different devices
Then Bootstrap has been successfully installed and configured.
Common Issues
1. Styles Not Working
- Check if CSS file path is correct
- Ensure CSS file is included in
<head>tag - Check network connection (CDN method)
2. JavaScript Functions Not Working
- Ensure JavaScript file is included before
</body>tag - Check browser console for error messages
3. Mobile Display Issues
- Ensure responsive meta tag is included
- Check if CSS file is fully loaded
Next Steps
Now that you have successfully installed Bootstrap, we'll next learn about Bootstrap's container system.