Programming Tutorials

What is Bootstrap and How To Get Started With Bootstrap

Google+ Pinterest LinkedIn Tumblr
If you are a programmer, web developer or you are interested in web programming. You may likely hear the word bootstrap and may ask how to get started with Bootstrap.  Bootstrap is the most popular mobile first front-end development framework. It 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. These templates may be used for typography, forms, buttons, tables, navigation, models, image slideshows and front-end developments.  It provides the clean and uniform solution for building an interface for developers. You may create with it’s 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 Started With Bootstrap

You will get the latest bootstrap with downloading from the 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 downloaded the bootstrap compressed folder, you will get the following file structure when you extract the folder.

bootstrap/
├── 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

Here is a very simple example of creating a webpage on bootstrap, you can easily customize them for your own uses. The following example shows the basic codes for creating a basic HTML template.

<!DOCTYPE html>
<html lang=”en”>
<head>
<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”>
</head>
<body>
<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”>
</script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”>
</script>
</body>
</html>

Where:

<!DOCTYPE html>
<html lang=”en”>
<head>
<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″>

You may use 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.

Note: 


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

Pro Tip: If you want to get some practical experience on how to get started with Bootstrap follow this interactive Bootstrap tutorial.

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Write A Comment