Bootstrap 4 Environment Setup

Bootstrap 3 is the most stable release, and the team is still supporting bug fixes and updates. Bootstrap 4 is the newest released version of Bootstrap, which contains new components, more responsive behavior, and faster stylesheets. 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 using Bootstrap CDN where the Bootstrap code is hosted somewhere else, and you can use it by simply taking the link and including 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 the internet's proper connectivity 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 on your local machine, and with the use of these downloaded Bootstrap files, you can implement the features of it on your site. For this approach, internet connectivity during your project run is not required because the bootstrap files are available on your local machine.

Download Bootstrap

You can download and get 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