Bootstrap 5, a popular front-end framework, empowers developers to create sleek and responsive websites with minimal effort. To install Bootstrap 5, you can choose from three methods including CDN links for quick integration, employ package managers like npm for seamless dependency management, or manually install Bootstrap files for greater customization control.
Downloading the Bootstrap File
For those who prefer a hands-on approach, downloading the Bootstrap file is a straightforward method. Here’s how you can do it
Syntax:
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.bundle.min.js"></script>
Steps to Install the Bootstrap 5
Step 1: Download Bootstrap 5
Navigate to the official Bootstrap website (https://getbootstrap.com/) and locate the “Download” button. Click on it to download the latest version of Bootstrap. You’ll receive a ZIP file containing the necessary files.
download button on getbootstrap.com
Step 2: Extract the ZIP File
Once the download is complete, locate the ZIP file in your downloads folder and extract its contents. You can do this by right-clicking on the file and selecting “Extract All” or using your preferred extraction tool.
Step 3: Include Bootstrap Files
Inside the extracted folder, you’ll find various files and directories. For a basic setup, you only need the CSS and JS files. Copy the ‘css’ and ‘js’ folders to your project directory.
css and js file
Step 4: Link Bootstrap CSS
Open your HTML file using a text editor. Inside the <head> section, include the Bootstrap CSS file by adding the following line:
Make sure the path to the CSS file is correct relative to your HTML file. ( see the code below)
Step 5: Link Bootstrap JS
To enable Bootstrap’s JavaScript features, include the Bootstrap JS file. Add the following lines just before the closing </body> tag:
Again, verify that the path to the JS file is accurate.
folder structure
Step 6: Utilize Bootstrap Components
With the CSS and JS linked, you can now start using Bootstrap’s components and utilities in your HTML. Refer to the official Bootstrap documentation for a wide range of components and their implementation.
Example: Illustration of Installation of Bootstrap 5 File.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GfG</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<h3 class="bg-success text-white ">GeeksforGeeks</h3>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
|
Output:
Output of index.html file
Using CDN Links
A Content Delivery Network is a network of distributed servers strategically placed around the globe to deliver web content efficiently to users. You can use CDN links to access Bootstrap’s CSS and JS files directly from remote servers. By integrating these CDN links in your HTML file, you ensure that your website benefits from the latest version of Bootstrap while taking advantage of the speed and reliability offered by the CDN.
Syntax:
<!-- Bootstrap 5 CSS via CDN -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Bootstrap 5 JS via CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
Linking Bootstrap 5 CSS via CDN:
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
Linking Bootstrap 5 JS via CDN:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Example: Illustration of installation of Bootstrap5 via CDN Links.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GfG</title>
<link rel="stylesheet" href=
</head>
<body>
<h3 class="bg-success text-white ">
GeeksforGeeks
</h3>
<script src=
</script>
</body>
</html>
|
Output:
Output using CDN link
Using Package Managers
This method involves using package managers like npm or yarn to install and manage Bootstrap as a dependency in your project.
Syntax:
// Using npm
npm install bootstrap
// Using yarn
yarn add bootstrap
Package.json File:
{
"dependencies": {
"bootstrap": "^5.3.2"
}
}
Project Structure:
Project structure
Approach:
Utilize package managers like npm or yarn to install Bootstrap. Include the Bootstrap files in your project through the package manager. Open your terminal and navigate to your project directory. Run either of the following commands based on your package manager preference
Syntax:
//Using npm
npm install bootstrap
// Using yarn
yarn add bootstrap
Steps to Install the Bootstrap 5
- Navigate to Your Project Directory:
Open your terminal and go to the directory where you want to create your project.
cd path/to/your/project
Create a new file named index.html in your project directory.
touch index.html
- Edit index.html with a Text Editor:
Open index.html in your preferred text editor. You can use Visual Studio Code, Sublime Text, Atom, or any other editor of your choice.
( This command opens the file in Visual Studio Code, replace with your editor’s command)
code index.html
- Add Basic HTML Structure:
Inside index.html, start by adding the basic HTML structure.
Example: Illustration of installation of Bootstrap5 using Package Manager.
Inside the <head> section, add a link to the Bootstrap CSS file. Since we installed Bootstrap using npm, the path will be relative to the node_modules directory.
<!-- Inside the <head> section -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
Just before the closing </body> tag, add a script tag to link the Bootstrap JS file.
<!-- Just before the closing </body> tag -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
- Add Bootstrap Components:
Now, you can start using Bootstrap components in the <body> section. For example, let’s add a Bootstrap navbar.
Save the index.html file and close your text editor.
Open index.html in your web browser to see the Bootstrap styles and components in action.
(This command opens in the default browser on macOS, replace with your platform’s command)
open index.html
Example: Illustration of installation of Bootstrap5 via Package managers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks</title>
<link rel="stylesheet" href=
"node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="bg-success text-white h1">
Welcome to GeeksforGeeks
</div>
<script src=
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...