Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post


Present web 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.

Bootstrap exactly does what business and customers expects:

What is bootstrap?

Bootstrap is popular free and open source HTML,CSS,Javascript framework for developing responsive and mobile first web applications.


Bootstrap 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?

Responsive design:
From 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:
Bootstrap framework is free and open source, you can customize Bootstrap framework according to your requirement also.
It also provides web based customization. Contains built in beautiful, reusable and functional components which are easy to customize.
Easy and Clean:
With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Provides a clean and uniform solution for building an interface for developers.

Bootstrap Packages:

Reusable Components:  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.
JavaScript plug-in: Contains dozen of built in jQuery plugins. 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>





Invalid entry,please enter valid data.