Bootstrap Tutorial

Bootstrap is a free collection of tools for creating websites and web applications in responsive web design using this css framework which supports mobiles,tablets and desktops.

Note: Before you include bootstrap.min.js, you should even include jquery. Without jquery bootstrap wont work as many of components of bootstrap are dependent on jquery. Hence have like below for sure..

<script src=”bootstrap/js/jquery-1.11.1.min.js”></script>
<script src=”bootstrap/js/bootstrap.min.js”></script>

Mandatory add meta tag for viewport which enables support for mobiles and tablets. Like <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.

Wanna see the difference between responsive and non responsive design??

Just open the two following links in different tabs first..



Now click restore down as shown below..

26-09-2014 11-07-41

Now drag it to left and right to see the difference between responsive and non responsive websites.

26-09-2014 11-09-13

Use .container for a responsive fixed width container.Use .container-fluid for a full width container, spanning the entire width of your viewport.

Creating layouts:

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Extra small devicesPhones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

26-09-2014 11-19-37

From the above image i hope you can understand that default page width/container will be divided in to 12 cols. We can either use col-xs/col-sm/col-md/col-lg to divide columns. Here we consider col-md in dividing. If we want 12 cols in a row, you should have class row where inside you shud have col-md-1 for 12 times. Similarly if you need 3 cols have col-md-4,for 2 cols have col-md-6 and 1 column col-md-12.


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

If you want to have this grid options for all mobiles,tablets and desktops..

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix

26-09-2014 12-16-09

For the above image if we use clearfix all column grid heights will be appeared to be same.

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6

26-09-2014 12-20-20

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
26-09-2014 12-22-16

Body copy

Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Lead body copy

Make a paragraph stand out by adding .lead.

Inline text elements

For highlighting a run of text due to its relevance in another context, use the <mark> tag. – Market text

For indicating blocks of text that have been deleted use the <del> tag. – Deleted text

For indicating blocks of text that are no longer relevant use the <s> tag. – Strikethrough text

For indicating additions to the document use the <ins> tag. – Inserted text

To underline text use the <u> tag. – Underline text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

For emphasizing a snippet of text with a heavier font-weight. <strong>tag for bold

For emphasizing a snippet of text with italics. <em> for italics

Alignments of text:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Tables: For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
Use .table-striped to add zebra-striping to any table row within the <tbody>.
<table class="table table-striped">

Add .table-bordered for borders on all sides of the table and cells.

Add .table-hover to enable a hover state on table rows within a <tbody>.

Add .table-condensed to make tables more compact by cutting cell padding in half.

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action


Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.


Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Add .form-inline to your <form> for left-aligned and inline-block controls.

<input type="text" class="form-control" placeholder="Text input">
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>

Difference between disabled and readonly: 26-09-2014 12-44-39

<button type="button" class="btn btn-default">Default</button>
btn btn-success,
btn btn-info,
btn btn-warning,
btn btn-danger

Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">


Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s