Post
Ask Question

Introduction To Bootstrap And How To Install It

History of Bootstrap

  • Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.
  • It was released as an open source product in August 2011 on GitHub.

What is Bootstrap?

  • Bootstrap is an open source JavaScript framework developed by Twitter's team of designers and developers.
  • It is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • It is absolutely free to download and use.
  • It was also programmed to support both HTML5 and CSS3.
  • It is also called as a front-end-framework.
  • It contains HTML, CSS-based design templates for typography, forms, buttons, and navigation and other interface components, as well as optional JavaScript extensions.
  • Use JavaScript plug-ins.

Supported Devices

Bootstrap

Why use Bootstrap?

  • It is very easy to use (If you have the basic knowledge of HTML and CSS you can use Bootstrap)
  • The user can develop responsive websites.
  • Supported browsers are Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera etc.
  • It is easy to getting started.
  • To create responsive grid system.
  • Bundled JavaScript plug-ins.
  • List of components to use (Typography, Code, Table, Forms, Button, Images, Icons, etc)
  • Good documentation.
  • Responsive design.
  • Mobile first approach.
  • Open source.
  • Saves time, customizable.

What is Responsive Website

A website is called a responsive website if it can automatically adjust itself according to the screen size, so as to look good on all devices, from smart phones to desktop.

What Bootstrap package contains

Scaffolding
It provides a basic structure with grid system, link style, and background.

CSS
Cascading style sheet is used to style the HTML elements.

Components
Bootstrap contains a lot of reusable components for iconography, dropdowns, navigation, alerts, pop-over’s, and much more.

Customize
Bootstrap components are customizable and can customize Bootstrap’s components, LESS variable, and jquery plug-ins to get own style.

JavaScript plug-ins
Bootstrap also contains a lot of custom jQuery plug-ins. You can easily include them all, or one by one.

Bootstrap can be boiled down to three main files

  • CSS - a CSS framework
  • JS - a JavaScript/jquery framework
  • Glyphicons - a font (an icon font set)

How to download Bootstrap

Step 1

  • Go to Google and type Bootstrap. The Bootstrap links will open.

    Bootstrap

Step 2

  • Click the first link (http://www.getbootstrap.com) in the search results.

    Bootstrap

Step 3

  • The bootstrap homepage will be opened.
  • Click on "Download Bootstrap" button.

    Bootstrap

Step 4

  • The page will be opened to select the Bootstrap option (Complete and minified CSS, JavaScript, fonts, no docs or original source files are included).
  • The file will be downloaded in zip format. You should extract the files.
  • Inside the file, there are three kinds of file available (CSS, FONTS, JS).

    Bootstrap

Step 5

  • Go to Google and type jquery.com
  • The site will be opened.

    Bootstrap

Step 6

  • Click the first option as shown in the image. The jQuery page will be opened.
  • Click the "Download jQuery" option.

    Bootstrap

Step 7

The jQuery file will be opened.

Bootstrap

Step 8

There are a number of download links available. Select advanced version to download.

Bootstrap

Step 9

The file will be downloaded. In that file, copy and paste the JS folder (downloaded file folder (bootstrap-3.3.7-dist→js→paste the file).

1. →Bootstrap
2. →Bootstrap
3. →Bootstrap
4. → Bootstrap

That is the way to include jquery.js files in the Bootstrap folder.

Step 10

After saving the file wherever you want, open the Notepad or Notepad++ (advanced version of Notepad).

Write HTML codes for linking all the files in your HTML page.

Step 11

Write the following code.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Bootstrap Installation</title>  
  6.     <link rel="stylesheet" type=”text/css” href="css/bootstrap.min.css"> </head>  
  7.   
  8. <body>  
  9.     <h1>To link the Bootstrap files and Jquery Files to HTML page  
  10.         <h1>  
  11.             <script type=”text/javascript” src=”js/bootstrap.min.js”></script>  
  12.             <script type=”text/javascript” src=”js/jquery.js”></script>  
  13. </body>  
  14.   
  15. </html>  
Step 12

After writing the codes, it must be saved where the Bootstrap file, for ex- index.html.

Bootstrap

Step 13

After saving the file, you should double click the file and the HTML page will run in the browser.

OUTPUT

Bootstrap
The page will be executed as pictured above.

Conclusion

I hope, now you have understood how to download and link the Bootstrap files in HTML page. In future articles, we will learn the Bootstrap techniques step by step. Stay tuned.


Similar Articles