Lesson 3 of 39
In Progress

Bootstrap Setup

Bootstrap has two versions available for download, compiled Bootstrap and Bootstrap source files.

Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster web development

The source version contain original source files for all CSS and JavaScript, along with a local copy of the docs.

We will use the compiled Bootstrap files. Here is the download link.

http://getbootstrap.com/

File Structure

Once downloaded the compiled Bootstrap, unzip the compressed folder. You’ll find the following file structure and contents.

KodNest bt1

The compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), and compiled and minified CSS and JS (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) in the fonts folder. These fonts file includes 200 icons from the Glyphicon Halflings set.

Please note that all JavaScript plugins require jQuery to be included.

Creating Web Page with Bootstrap

Open code editor and create a new HTML file(Without Bootstrap) as follows.

<!DOCTYPE html>
<html>
<head>
<title>Without Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Output for above code will look like:

KodNest bt2

Open code editor and create a new HTML file(With Bootstrap) as follows.

<!DOCTYPE html>
<html>
<head>
<title>With Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Output for above code will look like:

KodNest bt3

The href path for Bootstrap you can get from Bootstrap website.

You need to add the relative path of css and js after installing Bootstrap to achieve the result you are looking for.

KodNest Training New Batch is starting on 19th October 2020. Attend one week free demo classes.Register Now

New Report

Close