Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
bootstrap
html

How to install and set up Bootstrap

Amengor-Kwapong Angela

Overview

There are several ways developers can set up Bootstrap to include in their web development projects. We can install and set up Bootstrap in a project in the following ways:

  • By using a link to a CDN
  • Through a local copy of Bootstrap
  • Through package managers

The link to CDN approach

Content delivery networks, or CDNs, are code files hosted on the web that we can include in our project. CDN provide high performance by distributing the service spatially relative to end-users.

To use this approach, one simply has to find a CDN for Bootstrap and include the code in the HTML head element.

Illustration

<!DOCTYPE html>
<head>
 <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Latest compiled and minified JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
</html>
Installing bootstrap in a project via CDN

Local copy of Bootstrap approach

Bootstrap can also be installed in a project by downloading source files of Bootstrap from the internet.

Steps

  1. We can do this by downloading the latest version of Bootstrap from the official website. The downloaded file comes in the form of a .zip file, so we have to extract it before use.

  2. Then, we decide and choose a project which we wish to integrate Bootstrap into.

  3. Then, we move the unzipped Bootstrap folder into our project folder.

  4. By using a text editor, we open the HTML file in our project folder and link the local copy of Bootstrap in the head element.

The package manager’s approach

Another way to install Bootstrap into a project is by using a package manager. Package managers are software tools that automate the process of installing, upgrading, configuring, and removing computer programs in a consistent manner.

There are many package managers to choose from, but in this article, we will be illustrating with npm.

We can easily and quickly install the Bootstrap framework with the npm package by simply typing in the following command.

npm install bootstrap

RELATED TAGS

communitycreator
bootstrap
html

CONTRIBUTOR

Amengor-Kwapong Angela
RELATED COURSES

View all Courses

Keep Exploring