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

Bootstrap wells

In this article I will explain bootstrap feature wells, like name well is a container <div> that causes the content to appear an inset effect on the page.

Points to remember:

1.  By default, wells are medium in size.
2.  The .well class adds a rounded border around an element with a gray background color and some padding.
3.  Inside well you can use valid HTML, including other Bootstrap elements/classes.

Well Size:

Change the size of the well by adding the .well-sm class for small wells or  .well-lg class for large wells

<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>


<div class="container">
  <div class="well">Basic Well
   <h2>valid h2 HTML tag inside</h2>
<div class="container">
  <div class="well">Basic Well
   <h2>valid h2 HTML tag inside</h2>


Bootstrap implementation

What is bootstrap?

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

Where to get bootstrap?

You can download the latest version of Bootstrap from

Implementing in your application:

1.   When you open website after clicking Download Bootstrap button you will be        redirected to below screen.


Download Bootstrap: Clicking this, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included.]

Download Source: Clicking this, you can get the latest Bootstrap LESS and JavaScript source code.

Download Sass: By clicking this, you can get latest Sass-powered version of Bootstrap i.e. bootstrap-sass-3.3.4.tar latest download.

Bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.

2.  Bootstrap code Implementation in HTML/

JS: add below script with html file or or jsp page.

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
 <!-- you can add url i.e also-->
   <!- - src= -->
 <!— jQuery version you can use comparing with bootstrap vesrion-->
 <script src="../../Scripts/jquery-1.9.1.min.js"></script>
 <!-- Include all compiled plug-ins (below), or include individual files as needed -->
<script src="../../Scripts/bootstrap.min.js"></script>


Add below CSS with html file or ASP.Net or JSP page; add CSS in <head> tag with html.

     <link href="../bootstrap.css" rel="stylesheet" />
      <link href="../bootstrap.min.css" rel="stylesheet" />

      Ensure JS, CSS and Fonts files are stored in used path in application.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
   <link href="../bootstrap.css" rel="stylesheet" />
   <link href="../bootstrap.min.css" rel="stylesheet" />
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </div><!--/.nav-collapse -->
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../Scripts/jquery-1.9.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../Scripts/bootstrap.min.js"></script>

Precompiled Bootstrap:

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:


── css/

│   ── bootstrap.css

│   ──

│   ── bootstrap.min.css

│   ── bootstrap-theme.css

│   ──

│   └── bootstrap-theme.min.css

── js/

│   ── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ── glyphicons-halflings-regular.eot

    ── glyphicons-halflings-regular.svg

    ── glyphicons-halflings-regular.ttf

    ── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

Source Code:

The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation.


── less/

── js/

── fonts/

── dist/

│   ── css/

│   ── js/

│   └── fonts/

└── docs/

    └── examples/


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>