Bootstrap Setup

Akash

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.

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:

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:

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.

BootStrap

Bootstrap Setup

Akash

File Structure

Creating Web Page with Bootstrap

Output for above code will look like:

Output for above code will look like:

New Report

Close