Bootstrap 4 - Environment Setup

Bootstrap 4 (v4.6) is the most widely used older version of Bootstrap. Bootstrap 5 is the latest version, which includes new components, helpers, utilities, more responsive behavior, and is faster and easier to use. In this chapter, you will learn how to set up the environment to use Bootstrap 4.

We recommend using the latest version of Bootstrap instead of the older versions as it is feature-rich and more customizable.

Different Ways to Use Bootstrap

There are two ways of using Bootstrap:

  1. Using Bootstrap CDN, where the Bootstrap code is hosted somewhere else in the CDN, and you can use it by simply taking the link and including them in your project. In this case, proper internet connectivity is mandatory to run the project on a local PC, as the Bootstrap features will work from CDN.
  2. In another way, you can download the bootstrap package on your local machine and implement its features on your site. In this approach, internet connectivity is not mandatory during your project run, as the bootstrap files are available on your local machine.

Download Bootstrap

You can download Bootstrap's latest version from https://getbootstrap.com/docs/versions/.

Components of Bootstrap

Bootstrap 4 consists of three main files. These are:

  • Bootstrap CSS: a CSS framework.
  • Bootstrap js: It includes (popper.js, Bootstrap.js, and jQuery.js).
  • Glyphicons: an icon font set.

Also, Bootstrap 4 needs jQuery to function. jQuery is an exceptionally admired and commonly used JavaScript library that simplifies cross-browser compatible functionality. You can download and get the jQuery latest version from https://code.jquery.com/. An HTML code snippet to demonstrate the implementation of Bootstrap 4:

Example:

<!DOCTYPE html>
<html>

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

        <!-- 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>
    </head>

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

</html>

An HTML code snippet to demonstrate the implementation of Bootstrap 4 using CDN:

Example:

<!DOCTYPE html>
<html>

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

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

        <!-- jQuery library -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

        <!-- Latest compiled Bootstrap JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    </head>

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

</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram