Bootstrap Tutorial - step by step

In this tutorial, we will learn about the famous fluid front-end framework - Bootstrap (version - 3.x).

What is bootstrap?

A Responsive - mobile ready HTML, CSS, and JavaScript-based framework. The bootstrap files contain almost all the needed IDs, classes and JavaScript functions which may be required in any front-end design. Bootstrap was developed at Twitter by Mark Otto and Jacob Thornton.

Bootstrap went viral as it's twelve-column grid-system is device friendly (desktop, tablets, mobile phones) and very easy to use. The Bootstrap framework has pre-designed UI components like buttons, navigation bar, navigation with drop-down, forms, popover, tabs, dialogue boxes, image thumbnails, tooltips etc. So developers just need to add respective classes and IDs as per requirement in HTML document. But it is completely customizable and can be overridden to make required changes. eg;

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
</div>

<div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
</div>

We suggest you learn it by doing. This will make yourself familiar with the layout, Classes, IDs etc. The first thing is to install bootstrap in your project. Download Bootstrap and unzip it. Put it in your project directory.

<html>

<head>
    <title>bootstrap tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" type="text/css" rel="stylesheet">
    <!--(To modify/add your own css create a seperate css file and link it.)-->
    <link href="css/custom.css" type="text/css" rel="stylesheet">
    <script src="css/jquery-1.11.1.min.js"></script>
    <script src="css/bootstrap.min.js"></script>
</head>

<body>
    ... ....
</body>

</html>

You can also use Bootstrap CDN if you like to.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Now it is time to introduce grid system of Bootstrap. Bootstrap Grid-system is divided into containers, rows and 12 columns. Below is a simple example of the grid.

Tags - Bootstrap-3 Bootstrap