Learn Bootstrap – Bootstrap Tutorial for absolute Beginners

On the way of responsive web-designing BootStrap is a popular Framework. Bootstrap is open source & maintained in Github. It comes with many in-built classes. BootStrap is easy to use & saves programmer time to implement device optimized web. Whether it’s a mobile device or laptop BootStrap is capable to deal with any resolution. BootStrap supports all devices across the globe. You can download BootStrap from getbootstrap.com. To Getting Started with BootStrap read our Learn Bootstrap Tutorial.

BootStrap File Structure & How to Use them?

Downloaded version of BootStrap comes with CSS, Fonts & JS files. CSS Folder contains bootstrap.css, bootstrap-theme.css & their minified versions. Fonts folder contains glyph icons & JS folder contains bootstrap.js & it’s minified version. To Getting Started you can also use BootStrap CDN links. Look at the example below.

CDN link for BootStrapCSS, JavaScript & Theme.

BootStrap Hello World!

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Hallo World!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Getting Started with BootStrap</h2>
<div class="row">
<div class="col-sm-6">
Hallo World!
</div>
<div class="col-sm-6">
This screen is divided into two sections.
</div>
</div>
</div>
</body>
</html>

While writing your first BootStrap application don’t forget to add viewport meta tag with initial-scale value to 1. Here 1 means 100% or you can say the original resolution.

BootStrap Grid System

To design a fluid layout Bootstrap divides each row in to 12 columns. For each column there is a specific class defined in BootStrap. For an example if you want to divide your screen into two panel left (25%) & right (75%). You can declare col-md-3 & col-md-9 to respective parallel div’s. As a basic rows must need to be inside a .container (fixed-width) or .container-fluid (full-screen) class. Followed by row columns need to declare inside.

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

In BootStrap Grid system Columns are in 4 Categories col-xs-* (Extra Small for phones), col-sm-* (Small for tablets), col-md-* (Medium for desktops) & col-lg-* (Large for larger desktops).

For an example if you want to implement 4 equal columns you can do the following.

<div class="row">
<div class="col-md-3">Column i</div>
<div class="col-md-3">Column ii</div>
<div class="col-md-3">Column iii</div>
<div class="col-md-3">Column iv</div>
</div>

BootStrap Table

From the classical days of web programming we do implement table to present data. Do you remember to adjust a table with various of resolution what we do. Generally we declare table width 100%. Similarly to alternate row colors we add some odd or even CSS classes. Like this many problems related to table is addressed in BootStrap. By simply declaring the class table you can make your table responsive. Look at the example below.

<div class="container">
<h2>BootStrap Table Demo</h2>
<table class="table">
<thead>
<tr>
<th>Employee Name</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>Somanath Pradhan</td>
<td>pradhan@demoemailid.com</td>
</tr>
<tr>
<td>Rakesh Srivastab</td>
<td>rakesh@demoemailid.com</td>
</tr>
<tr>
<td>Supriti Kabi</td>
<td>supriti@demoemailid.com</td>
</tr>
</tbody>
</table>
</div>

Other BootStrap Classes for Table

.table-striped This class helps to highlight alternate rows.
.table-bordered Using this class you can add border to your table.
.table-hover On mouse over of each row this class help to highlight that row.
.table-condensed This class make tables more compact by cutting cell padding in half.

To add these classes you need to follow parent class table. I mean if you want to add border to your table you can add class=”table table-bordered”.

Contextual classes to color table rows or individual cells

.active Using class active you can put hover color to a particular row or cell.
.success Using class success you can highlight a positive action.
.info Using info class you can neutral informative change or action.
.warning Helps highlight warning data in a table.
.danger Using this class you can show indication for negative actions.

Text Related BootStrap Classes

.text-left Using this class you can align text to left.
.text-center Using this class you can align text to center.
.text-right Using this class you can align text to right.
.text-justify Using this class you can justify you paragraph text lines.
.text-nowrap Using this class you can protect your text to break into new line.
.text-lowercase This class will convert all text to lower case.
.text-uppercase This class will convert all text to upper case.
.text-capitalize Using this class you can capitalize text.

Button Related BootStrap Classes

.btn This is the parent class.
.btn-default Using this class you can show Standard button.
.btn-primary Provides extra weight to the button.
.btn-success In case of a positive action will take place we can use this button class.
.btn-info Contextual button for informational alert messages.
.btn-warning In case of some warning need to show you can use this button class.
.btn-danger If something will happen negative in that case you can use this.
.btn-link This class will show link in place of button.

These are the basics to Getting Started with BootStrap. If you are looking more in depth please refer getbootstrap.com