development is switching from desktop web development to mobile first web
development. Customer’s loves responsive web applications, as a customer I like
to open web application with Mobile, Tablet, Desktop which has best performance
and good look and feel.
exactly does what business and customers expects:
What is bootstrap?
responsive and mobile first web applications.
developed by Mark Otto and Jacob Thornton
at twitter in middle 2010. It was renamed from twitter blueprint to Bootstrap
and released on as open source project in august 2011.
Why to use Bootstrap?
bootstrap release 2.0 it supports responsive web design. Bootstrap's responsive
CSS adjusts to Desktops, Tablets and Mobiles
Browser support: Bootstrap support all popular
browsers, below is list of supporting browsers.
Mobile First: Since release 3, the framework
consists of Mobile first styles throughout the entire library instead of in
separate files. Bootstrap adopted mobile fist design philosophy, prefers
responsive design by default.
Re-Usable components: Bootstrap contains reusable
interface elements. I.e. buttons, navigation lists, pagination. Components are
implanted as CSS classes and reusable with many multiple html elements.
Free and open source:
framework is free and open source, you can customize Bootstrap framework
according to your requirement also.
provides web based customization. Contains built in beautiful, reusable and
functional components which are easy to customize.
Easy and Clean:
the knowledge of HTML and CSS anyone can get started with Bootstrap. Provides a
clean and uniform solution for building an interface for developers.
Contains dozen of reusable components i.e. dropdowns, navigation,
alerts, popover, pagination etc.
CSS: Bootstrap comes with feature of
global CSS settings, fundamental HTML elements styled and enhanced with
extensible classes, and an advanced grid system.
You can easily include them all, or one by one
Scaffolding: Bootstrap provides a basic structure
with Grid System, link styles, background.
Customize: You can customize Bootstrap's
components, LESS variables, and jQuery plugins to get your very own version.
First Example with Bootstrap:
<!--below are some alert messages created for leave application using bootstrap framework-->
<div class="alert alert-success">Success! Well Leave application submitted.</div>
<div class="alert alert-info">Info! Leave application processed to manager for approval.</div>
<div class="alert alert-warning">Warning ,For you only 1 leave available in this quarter.</div>
<div class="alert alert-danger">Error ! , require to select leave type.</div>