An updated version of the Bootstrap framework, which is known as Bootstrap 4.2.1 was recently launched. The updated framework comes with a number of new features and bug fixes. You can learn more about the changes in the latest version of the Bootstrap 4 framework by checking out the Bootstrap 3 Vs. Bootstrap 4 What’s new article?

Unfortunately, several users who are new to the world of web designing and Bootstrap 4 framework have no clear idea on how to install this framework. If you are one such a user, then do not worry because we are here to help you.

Just like any other framework, there are plenty of methods available for installing the Bootstrap 4 framework too. Below are a few simple methods that will give you a clear idea on how to install Bootstrap 4 framework.

 Remember Points

We highly recommend you to pay a visit to the official website of Bootstrap before you start the installation process. This will enable you to learn more about the framework and give you a rough idea on how to install it. In fact, you will be able to see a Download and Get started button in the official Bootstrap website.

If you click the download button, you will be redirected to another page where you can find multiple numbers of options to download the latest version of the Bootstrap framework.

Standard Download

Most users prefer to use the Standard download method when it comes to Bootstrap framework installation. This is a pretty simple method where you can easily download combined and minified JavaScript plugins and CSS bundles that can be later used for your web designing project.

Bootstrap files will automatically start downloading once you click on the Download button. Once the downloading is finished, you will receive a zip folder that contains compiled and minified versions of the JavaScript plugins and CSS bundles. You will need to extract the zip folder if you wish to make use of these files in your next project.

You will be able to see the following files once you extract the CSS folder.

The files that are available in the JS folder are as follows.

If you are wondering what the file structure for the precompiled Bootstrap folder really looks like, then check out the following image.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

Source Files

Users who download the source files from the official website of the Bootstrap framework will be able to use JavaScript, source Sass, and documentation files for future projects. Source files will also be downloaded as a zip folder, which means that you will need to extract it to get the contents included in it.

Once you open the source file, you will be able to see the following folders.

Here is a brief glimpse on what the file structure for the source code download really looks like.

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

Content Delivery Networks

Another simple way through which you can include the Bootstrap 4 framework into your designing projects is CDNS or Content Delivery Networks. If you are using CDNs, then you don’t even have to download Bootstrap to your PC. All you need to do is to simply add the following code into the existing HTML code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

However, an important point to note is that individuals who are using the precompiled version of the Bootstrap framework will need to find a way to include Popper.js and jQuery. Fortunately, you can either them through CDN versions or separately download them. Here is the code that will help you to include Popper.js and jQuery.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Package Managers

Package managers also let users to easily install Bootstrap source files without any hassles.  It is crucial to remember the fact that the Bootstrap framework will need an Autoprefixer or Saas compiler If you are using a package manager for the installation process.

npm

You will be able to easily and quickly install the Bootstrap framework with the npm package by simply typing in the following command.

npm install bootstrap

RubyGems

Users who wish to install Bootstrap 4 in their Ruby apps by using RubyGems and Bundler can easily do it by adding the following command to the Gemfile.

gem 'bootstrap', '~> 4.2.1'

Some users often prefer not to use Bundler. If that’s the case, then you should enter the following command.

$ gem install bootstrap -v 4.2.1

Composer

Users who are looking to install the JavaScript and Sass files of Bootstrap can do it by using the below-mentioned command.

$ composer require twbs/bootstrap:4.2.1

NuGet

Some developers often use.Net for their projects. If you are one among them then the following commands in Nuget can be used to install Bootstrap’s JavaScript, Sass, or CSS.

Install-Package bootstrap

Install-Package bootstrap.sass

If you are still having doubts about how to install Bootstrap framework, then it is best to get in touch with our expert technicians. However, users who have already figured that out, but need guidance on how to use Bootstrap framework should make sure to check out the How to Use Bootstrap with HTML article. This will give you a clear idea of how to create web pages and websites by using the Bootstrap framework.