Bootstrap Tutorial, W3Schools Bootstrap 3 Tutorial

Bootstrap Introduction

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Our website proper alignment and padding, rows must be wrapped within a .container or .container-fluid respectively for fixed-width and full-width. Use rows to create horizontal groups of columns.

What is Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.

Bootstrap also gives you ability to create responsive layout with much less efforts.

Advantages of Bootstrap

1. Open Source (Free) : It is completely free to download and use.

2. Easy to use : Bootstrap is very easy framework Anybody with the basic working knowledge of HTML and CSS can start responsive website with Bootstrap.

3. Consistent design : The Bootstrap designs and layouts of your web pages are consistent throughout your development.

4. Compatible with browsers : Bootstrap is compatible with all modern browsers such as Google Chrome, Mozilla Firefox, Internet Explorer (version 9, 10, 11 ect,.), Safari, and Opera.

5. Responsive Designs : Using Bootstrap you can easily create responsive designs. Automatic adjust web page width in Mobiles, Tablets, Small Screens and Large Screens.

6. Save lots of time : You can save lots of time and efforts using the Bootstrap.

Basic Setup :

Step-1 : Download Bootstrap Framework ( http://getbootstrap.com/getting-started/ ) and copy that files in your local drive or desktop afetr start your website or layout.

Step-2 : The follwingtag is used automatically adjest any screen.

<meta name=viewport content="width=device-width,initial-scale=1">

Step -3 : Include CSS File

Online Link : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

local folder link : css/bootstrap.min.css

Step-4 : Include JS File (You create every website first include jQuery file after bootstrap js file etc,..)

Online Link : https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

Online Link : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Local folder link : js/bootstrap.min.js

Step-5 : Strat header part, content and finally footer etc,.

Example :

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Program</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
 
<body>
 
<div class="container">
<center>
<h3>This is basic bootstrap example..!</h3>
    </center>
</div>
 
</body>
</html>

Output :