Bootstrap

A front end design framework

Muhammad Hasan Sarosh
Wednesday, November 12, 2014

Bootstrap, which is also referred as Twitter Bootstrap, is an open source

and popular Front End Design Framework which lets the developers to speed
up the process of designing websites & web applications and makes it much
comfortable task to do. It helps in making layout of the web pages adjusted
according to the characteristics of the devices display.
In the mid of 2010, Jacob Thornton, who was a developer at Twitter
then, and his fellow developer Mark Otto, who was also an employee of
Twitter, developed bootstrap; which was known as Twitter Blueprint at that
time. It was supposed to make the style and design of the internal tools of
Twitter Company consistent, from 2010 to present it directs the styles of
these tools used at the Twitter. Twitter organized their first Hack Week in
2010 where bootstrap was deployed for the first time with the actual and real
conditions and challenges. On the 19th of August of the next year i.e. 2011,
which was Friday, Twitter released it as an open source project and now it is
among the largest open source projects of the world. Later its developers left
the Twitter and now they are the part of team which maintains the
framework. Since then it is released more than twenty times which also
includes three major rewrites, v2 & v3 which are popularly known as
Bootstrap 2 and Bootstrap 3, of the mostly used front end framework of the
world.

What is a Responsive Design?

As we are having a greater number of platforms, devices and browsers
nowadays with which our web applications have to deal. It requires our web
applications to be Responsive and Adaptive according to the devices
characteristics like display size and resolution. It makes it possible for our
web applications to be reached by large number of possible devices with
proper presentation and layout.
In the first major rewrite of the Bootstrap, which was released as v2 or
Bootstrap 2, an optional style sheet was added to the package to bring
responsiveness to the framework. On writing the third major release of the
Bootstrap, which is known as Bootstrap 3, the developers followed the Mobile
First Approach and made the Bootstrap a responsive framework by default in

all the files of library rather than putting some different files for
responsiveness.

What Does the Bootstrap Package Contains?

When we download the Bootstrap library package it includes files
having CSS, fonts and Java Script. These files are structured in a basic file
structure.
It holds the style sheets, CSS, which have defined styles for the basic
elements of HTML; which have classes those can be extended and
customized according to the need & requirement and follows the Advanced
Grid System of the bootstrap.
This package also holds more than a dozen of JQuery, which is a library
written in Java Script, plugins which can be included in the project as they
are or can be edited and customized according to the requirement and need.

Grid System Provided By Bootstrap

Grids are used for structuring and organizing the content in web
designing which results in putting lesser load and burden to the users and
makes web apps to be scanned in easy manner. In the v3 i.e. Bootstrap 3 the
Mobile First Approach i.e. the Fluid Grid System was used in the framework.
This grid system may contain a max of 12 columns which is scaled on the
basis of devices display and the view port size.
The content is placed within the continuously appearing rows and
columns. In order to have appropriate padding and alignment of the content
Rows are required to be placed under the .container class and Rows are to be
used to generate columns, appearing collectively as a group in each Row,
which lies horizontally. The content we have to render is required to be
placed under these columns. It is to be noted that first direct children of a
Row must have to be a column, any other component cant be introduced
just under a Row, only column could be an immediate or direct child of a
Row.
When we insert a row in an element having .container class it would
take a fixed width while when we put it in an element with .container-fluid
class it takes the full width of the devices screen.
The content placed by us within the columns gets some gap that is the
padding which are the gutters generated by the columns. On all the div
elements which holds .row as the value for class attribute this gap or
technically speaking the padding on the very first and the very last columns
is offset by the use of assigning a ve value to the margins for Rows.
Tables by Bootstrap
In order to apply the fundamental styling and basically required
padding to the table element of HTML the .table class can be added as

the base. To add more styling bootstrap also provides different other
classes for tables which can of course be customized according to the
requirement and need of styling. Among them one class is .tablestriped which is assigned to put striping to the table element. This
class is to be assigned to any row of the < tbody > tag of table
element which is required to be shaded or colored differently than
others. Similarly, in order to have nice outline that is the borders
around the table bootstrap provides us the class .table-bordered
assigning which results in the borders on every side of the table and
cells of the table.
REFERENCES:

Tutorials Point
Bootstrap Tutorial Tutorials Point
http://www.tutorialspoint.com/

Bootstrap
About Bootstrap
http://getbootstrap.com/about/

Bootstrap
CSS Bootstrap
http://getbootstrap.com/css/