Absolute Beginners Guide to Get Started with BootStrap

getting-started-with-bootstrap

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 the below paragraphs.

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">
<h1>Getting Started with BootStrap</h1>
<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-stripedThis class helps to highlight alternate rows.
.table-borderedUsing this class you can add border to your table.
.table-hoverOn mouse over of each row this class help to highlight that row.
.table-condensedThis 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

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

Text Related BootStrap Classes

.text-leftUsing this class you can align text to left.
.text-centerUsing this class you can align text to center.
.text-rightUsing this class you can align text to right.
.text-justifyUsing this class you can justify you paragraph text lines.
.text-nowrapUsing this class you can protect your text to break into new line.
.text-lowercaseThis class will convert all text to lower case.
.text-uppercaseThis class will convert all text to upper case.
.text-capitalizeUsing this class you can capitalize text.

Button Related BootStrap Classes

.btnThis is the parent class.
.btn-defaultUsing this class you can show Standard button.
.btn-primaryProvides extra weight to the button.
.btn-successIn case of a positive action will take place we can use this button class.
.btn-infoContextual button for informational alert messages.
.btn-warningIn case of some warning need to show you can use this button class.
.btn-dangerIf something will happen negative in that case you can use this.
.btn-linkThis 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