What is Bootstrap and How To Get Started With It

If you are a programmer, web developer  or you are interested on it, may likely heard the word bootstrap and want to learn more about it.  Bootstrap is the most popular mobile first front-end development framework which was created using HTML, CSS, and JavaScript for faster, easier and responsive web development.  

Bootstrap includes free collection of tools for creating HTML and CSS based web templates for topography, forms, buttons, tables, navigation, models, image slideshows and front end developments.  It provides clean and uniform solution for building an interface for developers with functional and built-in easy to customize components. 

Programmers preferred bootstrap framework since it is easy to get started with powerful grid system which allows you to create highly responsive web development along with including bundled CSS and JavaScript codes which saves time for developing web pages.  

How to get Bootstrap

You will get latest bootstrap with downloading from bootstrap official site or using it with CDN provided by bootstrap as given below. 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

What's Included With Bootstrap

Once you have download the bootstrap compressed folder, you will get the following file structure when you extract the folder.
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

How To Create Basic HTML Template  With Bootstrap

You will get very simple examples on getting started page on bootstrap, you can easily customize them for your own uses. The following example shows the basic codes for creating basic HTML template.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic HTML Template  With Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<h1>This example shows the basic codes for creating basic HTML template</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js">


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"> 
represents HTML5 document type since bootstrap uses HTML elements with CSS properties.
<meta name="viewport" content="width=device-width, initial-scale=1">  
is used to set the page width to the device width and initial zoom level to "1" when the page is first loaded by the browser. 
<link href="css/bootstrap.min.css" rel="stylesheet">
 loads bootstrap core CSS document in the <head> section of your <html> document. 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
 loads jQuery via Google CDN before closing the <body> tag of your <html> document.
<script src="js/bootstrap.min.js"></script> 
loads bootstrap core JavaScript document in the <body> section of your <html> document.


If you want to use bootstrap CDN can replace the above codes to CDN codes give above.