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

Jumbotron

In this article I will explain bootstrap feature Jumbotron, like name this component can optionally increases the size of headings and add a lot of margin and create big box around text for extra attention.

Points to remember:

1.  Jumbotron is displayed as gray text box, gray text box created around text with rounded corners.
2.   Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
3.  To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all

Example:

  <div class="page-header">
      <h1>Leave Summery</h1>
         <h3> example with simple header</h3>
    </div>
   
 <div class="jumbotron">
         <h1>Leave Summery</h1>
        <h3> example with jambtron</h3>
    </div>


Jumbotron Example with full width, and without rounded corners:


<div class="jumbotron">
 <div class="container"> <h1>Leave Summery!</h1> <p>This is an example for jumbotron.
 </p> <p><a class="btn btn-primary btn-lg" role="button"> Learn more</a> </p> </div>
  </div>


Output:


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>

Example:

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

Result:


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 http://getbootstrap.com/.

Implementing in your application:

1.   When you open http://getbootstrap.com 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/Asp.net/JSP:

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

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
 <!-- you can add url i.e also-->
   <!- - src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js_ -->
 <!— 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>

CSS:

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

      <!--CSS-->
     <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.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 
    <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">
     <!--CSS-->
   <link href="../bootstrap.css" rel="stylesheet" />
   <link href="../bootstrap.min.css" rel="stylesheet" />
 
    <title></title>
</head>
<body>
 
    <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>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
 
     <!-- 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>
</body>
</html>

Precompiled Bootstrap:

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

bootstrap/

── css/

│   ── bootstrap.css

│   ── bootstrap.css.map

│   ── bootstrap.min.css

│   ── bootstrap-theme.css

│   ── bootstrap-theme.css.map

│   └── 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.

bootstrap/

── less/

── js/

── fonts/

── dist/

│   ── css/

│   ── js/

│   └── fonts/

└── docs/

    └── examples/