Bootstrap 4 Environment Setup

Bootstrap 3 is the most stable release, and the team is still supporting with the bug fixes and updates. Bootstrap 4 is the newest released version of Bootstrap which contains new components, more responsive behavior and faster stylesheets incorporated in it. In this chapter, you will learn about how to set up the environment for using Bootstrap.

Ways of Using Bootstrap

There are two ways of using Bootstrap, one by using Bootstrap CDN where the Bootstrap code is hosted somewhere else, and you can use it by simply taking the link and include them in your project. So the actual Bootstrap functionalities and code is hosted somewhere in the CDN, and so you are simply using its link to connect your project to implement the responsive features provided by it.

Here, for running the project with Bootstrap implemented, you need to have proper connectivity of the internet because the Bootstrap feature will work from the CDN which is residing somewhere in the server.

In a second way, you need to download the Bootstrap package in your local machine, and with the use of this downloaded Bootstrap files, you can implement the features of it in your site. For this approach the internet connectivity during your project run is not required because the bootstrap files are available in your local machine.

Download Bootstrap

You can download and get the Bootstrap's latest version from http://getbootstrap.com/

Components of Bootstrap

The bootstrap consists of three main files. These are:

  • Bootstrap CSS: a CSS framework.
  • Bootstrap js: a JavaScript / jQuery framework.
  • glyphicons: a font (an icon font set).

Also, Bootstrap needs jQuery for functioning. jQuery is an exceptionally admired and commonly used JavaScript library which simplifies the cross-browser compatible functionality.

You can download and get the jQuery latest version from https://code.jquery.com/

A Simple HTML to Display the Implementation of Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1">
</head>

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery library -->
<script src="jquery.min.js"></script>

<!-- Latest compiled Bootstrap JS-->
<script src="bootstrap.min.js"></script>
<body>

    <h1>This is page heading.</h1>
    <p>This is my first <strong>paragraph text</strong>.</p>

</body>
</html>

A Simple HTML to Display the Implementation of Bootstrap Using the CDN:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1">
</head>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled Bootstrap JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body>

    <h1>This is page heading.</h1>
    <p>This is my first <strong>paragraph text</strong>.</p>

</body>
</html>

Scroll Back to Top