Uncategorized

Lesson 1 – Bootstrap Environment Set Up

It is rather easy to set up development environment for Bootstrap. Just go to https://getbootstrap.com/ to download the latest version of Bootstrap. You will see the following screen when you click on this link.

Now, click on the Download button as shown in the following figure.

It will redirect you to another page with quite a few options. You will simply click on Compiled CSS and JS which is the compiled code to instantly start developing in Bootstrap. The latest version of Bootstrap is Bootstrap v4.3.1 and its compiled code contains:

  • Compiled and Minified Cascade Style Sheet (CSS) Bundles.
  • Compiled and Minified JavaScript plugins.

Now, unzip the downloaded zipped file. You will get a folder named bootstrap-4.3.1-dist which further contains two more folders that are CSS and JS. Open the CSS folder, copy any one of the bootstrap or bootstrap.min files and put it in your development folder. Similarly, open the JS folder, copy any of the bootstrap or bootstrap.min files and put it in the same development folder.

The next step is to include both these files in your index.html file. You can accomplish this task by writing the following piece of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
    

    [block]1[/block]
</body>
</html>

Similarly, it is also possible to install Bootstrap via a Content Delivery Network (CDN). Just go back to the Download page and find Bootstrap CDN. Copy each link individually and put it in your index.html file as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
    
    [block]2[/block]
    [block]3[/block]
</body>
</html>

Now, we write a small program to check whether or not you have successfully set up the Bootstrap development environment. We will create a div and change its background color. We will also apply some padding and margin to the div and change the text color as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Environment Setup</title>
</head>
<body>
    <div class="bg-dark m-3 p-3">
        <p class="text-light">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur, ducimus?</p>
    </div>

    [block]4[/block]
    [block]5[/block]
</body>
</html>

It is pertinent to mention that you seldom have to create any custom class while using Bootstrap. The Bootstrap’s built-in classes can perform most of the functions for you.

Here is the output of the above code.

In the next lesson, we will study the Bootstrap Grid System.