How to Install and Set Up Bootstrap?
Overview
Bootstrap is an open-source, front-end framework composed of HTML, CSS, and JavaScript. This tool provides ready-to-use templates for developing responsive, mobile-first websites. In addition to its responsive design, it is easy to use and quickly learn, maintains broad browser compatibility, and offers a consistent format with reusability. Web developers can integrate Bootstrap into their projects in several ways. For example, the Bootstrap CDN.
Introduction
- Bootstrap provides you with custom HTML, CSS styles, and JavaScript components that you can integrate with your project. These components help add functionality to your project and save lots of coding time.
- It was developed by Mark Otto and Jacob Thornton and named the Twitter Blueprint. Later, it was called Bootstrap and released as an open-source project on Github. Since then, Bootstrap has evolved over version 5.
Bootstrap Versions
- Since its initial release on August 19, 2011, Bootstrap has had more than twenty updates, the first being Bootstrap version 1.0.
- The responsive functionality was added to the entire framework as an optional stylesheet with Bootstrap 2.
- Bootstrap 3 was released in 2013 and was made responsive by default with a mobile-first approach. This version supports all the significant browsers, including Internet Explorer 8-9.Later came Bootstrap version 4, released in 2018, and Bootstrap version 5, released in 2021.
- Bootstrap 5 is the newest version of Bootstrap, with new components, faster stylesheets, and more responsiveness. All significant browsers and platforms are supported in their most recent, stable releases. However, Internet Explorer 11 and below are not supported.
- Also, Bootstrap 3 & 4 used jQuery for functional components(like modals, tooltips, popovers, etc.), whereas Bootstrap 5 has switched to Javascript.
Where to Get Bootstrap?
Developers can configure Bootstrap in various ways to include it in their web development projects. The following methods can be used to install and set up Bootstrap in a project:
- Making use of a CDN link
- Downloading the localized version of Bootstrap
But before moving to the detailed steps of setting up Bootstrap in the project, we need to know about the file structure of Bootstrap.
File Structure of Bootstrap
Bootstrap consists of three file components:
- CSS
- Javascript
- Fonts(Glyphicons)
There are two versions of Bootstrap: one that is precompiled and the other that is compiled from source code. The downloaded file structure of the precompiled version of Bootstrap looks like this:
It comes with precompiled files that you can use directly in any web project. It includes fonts from Glyphicons, the optional default Bootstrap theme, and compiled and minified CSS and JS files.
Inside the fonts, folders four font files (glyphicons-halflings-regular.*). These font files contain 200 icons from the Glyphicon Halflings collection.
Basic Bootstrap HTML Template
The Basic Bootstrap HTML Template that you can use to build websites looks like the following:-
Output
Now let us understand the various ways of setting up Bootstrap in our project.
Bootstrap Can Be Used in 2 Ways:
- Using Bootstrap CDN Link.
- By downloading the Bootstrap file.
1. Using Bootstrap CDN Link
Without downloading them, we can reference bootstrap files directly from the public CDN and add them to our webpage.
Note: A content delivery network (CDN) is a term used to describe a collection of servers that are geographically dispersed and linked together to deliver Internet content quickly.
Step 1: Create a basic HTML page To use Bootstrap, we will first create a basic HTML template. The first thing you should do that adds a new text file in the project root and name it "bootstrap.html".
Paste the following code into the file:-
The meta tags ensure the website is responsive and scales appropriately on different viewports of different sizes.
Step 2: Include Bootstrap via CDN Links:
- Add CSS CDN Link Simply paste the following code into your template's <head> section before all the other stylesheets to add Bootstrap CSS to your page.
Ensure you visit the official documentation of Bootstrap to get the CDN links for the latest Bootstrap version.
-
Add Javascript CDN Link Bootstrap provides some components(modals, tooltips, popovers, etc.) that require Javascript plugins and popper.js to function correctly.
Paste the following CDN Link right before the closing </body> tag to include javascript in your project:
If you need only the CSS part of Bootstrap, you can skip the Javascript CDN in your project.
Step 3: Put everything together. After including the above links, the basic HTML page has been converted into a Bootstrap Template. The code looks like this:
Congratulations!, You have successfully added Bootstrap to your project using the CDN link.
Now Let's see an example illustrating the use of the Bootstrap CDN link to use the Bootstrap with the HTML document.
Here, we will see the different contextual colors provided by Bootstrap by using the different classes. These colors add meaning to the text. Add the following classes for adding color to text: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light
Code for Understanding Different Contextual Colors:
Output
2. By Downloading the Bootstrap File
Step 1: Start by clicking "Getting Started" on the getbootstrap.com website. Download the CSS and JS by clicking the Download Bootstrap button.
[IMAGE_4 Create a similar image]
[IMAGE_4 Finish]
Step 2: Unzip and copy the downloaded file into the same directory as "bootstrap.html". You will find two subfolders in the unzipped folder: CSS and js.
Step 3: To load the Bootstrap CSS, navigate to the CSS folder and find the file "bootstrap.min.css". Copy the file path and paste it into the href section in the link tag below.
Note: Your path should correspond to your setup.
Step 4: Similarly, copy the file path of “bootstrap.min.js” into the src section of the script tag below to add Bootstrap Javascript.
Again, make sure the path corresponds to your setup.
Step 5: After completing the above steps, your code should look like this.
Bootstrap has been successfully added to your project.
3. By Using Package Managers
-
Another way to use Bootstrap in a project is using a package manager.Package manager is a collection of software applications that automate software installation, upgrading, configuring, and removal.
-
Various package managers like yarn, composer and npm can be used to get Bootstrap in your project. We will be using npm in this tutorial.
-
You can install bootstrap very easily by using npm by typing the following command :
npm install bootstrap@5.2.0
Conclusion
-
Bootstrap is an open-source, front-end framework composed of HTML, CSS, and JavaScript.With Bootstrap, it only takes a few basic CSS classes to quickly and easily create a fully responsive and stunning front end.
-
You can include Bootstrap in your project in 3 ways:
- By using CDN links
- By downloading the bootstrap file
- By using package managers
-
Using Bootstrap from a CDN is advantageous because it speeds up loading time and uses less server bandwidth.
-
You can opt to download Bootstrap files over using the CDN link because the CDN will work if there is an Internet connection.
-
One more preferential option for using Bootstrap is using a particular package manager. Bootstrap is available in most of the popular package managers like Node.js, yarn, etc.
-
Using a Package Manager will also make updates easier. In the case of CDN, you have to change the entire link to include the latest Boostrap version.