Introduction
Bootstrap is a popular front-end framework that can help you create beautiful, responsive designs with ease. While there are various ways to integrate Bootstrap into your project, this guide will focus on the simplest method: downloading the ZIP file and adding it manually to your project folder.
Steps to Install Bootstrap
Step 1: Download Bootstrap
- Go to the Bootstrap website.
- Navigate to the “Download” section.
- Click on the “Download” button under the “Compiled CSS and JS” option to download the ZIP file.
Step 2: Extract the ZIP File
- Locate the downloaded ZIP file on your computer.
- Extract the ZIP file, which will give you a folder named
bootstrap-<version-number>.
Step 3: Add Bootstrap to Your Project Folder
- Open your project folder.
- Create a new folder inside your project folder and name it
assetsorlibs. - Move the extracted
bootstrap-<version-number>folder into theassetsorlibsfolder.
Step 4: Include Bootstrap in Your HTML File
Now, you’ll need to include the Bootstrap CSS and JS files in your HTML file. You can either include individual components or the entire library.
To include the entire library:
Add the following lines in the <head> section of your HTML file:
<link rel="stylesheet" href="assets/bootstrap-<version-number>/css/bootstrap.min.css">
And add this line just before the closing </body> tag:
<script src="assets/bootstrap-<version-number>/js/bootstrap.bundle.min.js"></script>
To include individual components:
If you only need specific components, you can include them individually. For example, to include only the Bootstrap Grid and Button components, add these lines in the <head> section:
<link rel="stylesheet" href="assets/bootstrap-<version-number>/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap-<version-number>/css/bootstrap-buttons.min.css">
And add the corresponding JS files just before the closing </body> tag:
<script src="assets/bootstrap-<version-number>/js/bootstrap-grid.min.js"></script>
<script src="assets/bootstrap-<version-number>/js/bootstrap-buttons.min.js"></script>
Conclusion
And there you have it! You’ve successfully installed Bootstrap into your project without using any package managers. Now you can start building responsive and beautiful web pages with ease.
