Twitter Botostrap is one of the most stable and widely used Web UI Frameworks around the world. The attached articles is from one of my 18 minutes talk at Advaiya Solutions.

1. Web Application Framework | Bootstrap
Building presence, voicing thoughts | Amit Dubey
In today’s world web applications are the preferred choice of development as more and more platforms
are abiding to web standards. In such a competitive and dynamic compositions it becomes essential to
work with frameworks and tools that can help scale your web applications to multiple web platforms
including desktop, laptop and ultra-books to smart phones and tablet devices.
Twitter’s Bootstrap is one such web application framework that helps you build web applications which
are inherently responsive to various resolutions, display aspect ratios and can be used from your choice
of device including mobile devices.

2. Introduction
Definition of web application framework
“A web application framework (WAF) is a software framework that is designed to support the
development of dynamic websites, web applications, web services and web resources.”
Brief history of web application framework
Earlier web application developers thought process for developing web application UI’s
“Just fit anything to make it run”
Mark Otto and Jacob Thornton at Twitter soon realized that this is not a good idea for future web platforms and
especially for twitter. In August 2011 they published their own made first web application framework under the
banner of Twitter Bootstrap which was most popular GitHub development project by February 2012.
Twitter bootstrap laid the foundation for thought process of responsive user interfaces for web based
applications. Twitter released bootstrap 2 by end of January 2012 which was another massive hit and people
started using Twitter Bootstrap framework actively in their applications.
http://builtwithbootstrap.com/ provides some quick live site references those are built using Twitter Bootstrap
Framework

3. What is Responsive Web Design?
Responsive web design inherently means reacting to change in environment, in case of web applications this can
be
-
Browsers
Resolutions
Display Aspect Ratios
Devices
EXAMPLE OF RESPONSIVE WEB DESIGN
Few more examples of sites built with Twitter Bootstrap
•
Toyota.com - Needs no introduction
•
Appster – Fastest growing mobile firm in Australia
•
Quicklinkr - A home for all of your favorites
•
Open Cooks – Website for food lovers

4. Why Bootstrap?
Provides a clean and uniform solution for building an interface for developers
Bootstrap makes use of compact and clean CSS that provides a very clean and uniform solution building
approach. This CSS can be customized as per ones needs, however using the default version also provides enough
features for rapidly building a good looking, crisp and clean web-site or web-application.
User Interface Framework (JS, CSS and Images)
Bootstrap makes use of standard JS, CSS and images providing a consistent look and feel across multiple webapplications. It becomes very easy even for system users to grasp the application usability quickly and this also
reduces the end user learning curve across web-applications since all of the applications follow the same simple
and clean UI constructs.
Open Source project
You can customize and build your own copy. It’s open source and licensed under Apache 2.0 license making it
free to use and distribute with your own customizations.
Supports all major browsers incl. IE7
Bootstrap has been built inherently on LESS framework making it possible to work across browsers and devices.
LESS is a framework to generate CSS based on parameter settings dynamically, in simple words it’s a way of
generating CSS on runtime that suits your environment and needs.
Supports HTML5 and CSS3
JavaScript takes much longer on MAC platforms and few previous versions of MAC do not even support flash
making it difficult to embed dynamic content into the site. Bootstrap supports and works on HTML5 which has
native support on all popular platforms including MAC and support on all popular browsers making it work
across platforms and devices.
Beautiful and functional built-in components which are easy to customize
Bootstrap come pre-built with standard set of widely used components including buttons, carousels, panels, etc…
Behavior of all these components is driven by the Base CSS component of bootstrap making it really simple and
easy to customize the look and feel and behavior of these controls. Being open source there are also external set
of customized components available those enhance the components to greater extent by introducing higher
degree of customizability.

5. Bootstrap Constructs
Scaffolding
“A temporary structure on the outside of a building, made of wooden planks and metal poles,
used by workers while building, repairing, etc…”
Twitter Bootstrap scaffolding consists of fixedfluid GRID system and LAYOUT making it possible to adhere to
responsive design standards. Twitter Bootstrap’s scaffolding also consists of LESS making it easier to customize
the complete structure without even digging deep.
Base CSS
Twitter Bootstrap’s Base CSS covers design constructs such as Typography, Code, Tables, Forms, Buttons, Images,
Icon’s. Bootstrap 2 onwards supports GLYPHICONS.
“GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with
an emphasis on simplicity and easy orientation.”
Components
Twitter Bootstrap comes with pre-defined set of commonly used components including Dropdowns, Button
groups, Button dropdowns, Navigational tabs, pills, and lists, Navbar, Breadcrumbs, Pagination, Labels & Badges,
Page headers and hero unit, Thumbnails, Alerts, Progress bars.
There are external third parties who have also contributed to the component developments to enhance existing
set of components and also add new components. An extensive list exists here http://bootstraphero.com/
JQuery Plugins
“jQuery is a multi-browser (cf. cross-browser) JavaScript library designed to simplify the clientside scripting of HTML.[2] It was released in January 2006 at BarCamp NYC by John Resig”
JQuery spices up the overall user experience by adding dynamism to components and HTML DOM elements like
Transitions, Modals, Dropdowns, ScrollSpy, Togglable tabs, Tooltips, Popovers, Alert messages, Buttons, Collapse,
Carousel, Typeahead, Affix.
JQuery also exposes various events which can be used by developers to add custom handlers for achieving a
specific task.
Twitter Bootstrap Structure

6. Bootstrap Benefits?
Courtesy: Zing Design
Bootstrap development is FAST
If you need to push out a new site or app in a matter weeks and have a shoestring design budget,
Bootstrap is perfect! You can grab one of the great templates available, make a few style changes, throw
in some images, pop on a bit of snazzy interactivity and you’re away! In the past, fast and easy has been
synonymous with bad practice, and while there are a few issues, Bootstrap has been built from the
ground-up by some of the smartest, geekiest geeks on the planet. Cross-browser and device
compatibility have been taken into account, which will cut down your debugging time phenomenally.
It’s platform agnostic
Remember: while it might seem like magic, it’s just CSS and JavaScript. You don’t have to learn anything
new, just plug it into the head of the document and all of it’s magnificent power will suddenly become
available. Just in case things weren’t easy enough, you can get a Compass version of Bootstrap if you
prefer SASS to LESS, there are Bootstrap packages like this one for .NET and, of course, a WordPress
plugin.
You can just pop magical classes onto any HTML element and
make it do fancy stuff!
Now I know what you’re thinking… ‘Hey isn’t that going to make my HTML horribly unsemantic?!‘. Well
maybe it doesn’t follow best practices, but it is easy and fast. If time is of the essence, or the site is a
one-off promo or landing page, Bootstrappin’ is a no-brainer. If you are worried about non-semantic
markup but are still eager to use Bootstrap for a big project, you may find you have to dig into the
Bootstrap source code.
It’s responsive from the get-go!
By using the fluid grid layout, designing for responsive websites is a walk in the park. Everything just
works! Enjoy the true power of the grid, watch as your columns respond fluidly at every important viewport width. Bootstrap makes mobile-first development even easier as you don’t need to go altering
your mark-up with every new screen width that you are designing for.
It’s fully customizable

7. Few In-house development references
In-House Development
Advaiya Lab
Leave Management System
Library Management System
Ideascale Hackathon | Data Insights
Ideascale Hackathon | iSocialytics
Sample Screenshot
End of document
Description
Our very own Advaiya Lab is using Twitter Bootstrap for in-house
projects. Advaiya Lab will soon be publishing various flavored
Bootstrap Templates to be used in live projects too.
Our new leave management system which is currently under
development will be using Bootstrap for its UI make-over.
One small application recently developed and used within Advaiya
Lab is Library Management System. This version is a SharePoint App
and uses Bootstrap for its UI.
Data Insights project on IdeaScale platform has been built using
Bootstrap as the UI Frontend Framework. This project was one among
the First Price Winner.
iSocialytics project on IdeaScale platform has been built using
Bootstrap as the UI Frontend Framework.