Back to Course

BootStrap

0% Complete
0/39 Steps
  1. Introduction to Bootstrap
    What is Bootstrap ?
  2. Why Bootstrap ?
  3. Bootstrap Setup
  4. Customizing Install
  5. Responsive Design
  6. Container class
  7. Grid
    Grid System
  8. Bootstrap Grid Column
  9. Dynamic Layouts
  10. Utility Classes
  11. Navigation Components
    Navs
  12. Navbars
  13. Page Components
    Headers
  14. Panels
  15. ListGroups
  16. Breadcrumbs
  17. Labels
  18. Buttons
  19. Glypgicons
  20. Wells
  21. Forms
    Creating forms
  22. Inline & horizontal forms
  23. Form Validation
  24. Bootstrap Plugins
    Alert Messages
  25. Buttons group
  26. Scroll Spy
  27. Tabs
  28. Collapse
  29. Modal
  30. Customer Plugins
    Bootbox.js
  31. DateTime Picker
  32. Font Awesome
  33. Off-Canvas
  34. Image Gallery
  35. Social Buttons
  36. Sweet Alert
  37. Button
    Buttons
  38. Button Group Button
  39. Button Method

Participants2254

Show more
BootStrap Bootstrap Setup
In Progress
Lesson 3 of 39
In Progress

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.

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.

New Report

Close