Code for creating Tooltip and Popover with Bootstrap

Tooltip and PopOvers are useful tips for user to displaying information. They help to reduce the page load and give much more information over hover. Below is code for creating it.
<!-- tooltip and popovers -->
<div class="container">
    <!-- tooltip -->
    <div class="row">
        <div class="col-md-12">

Code for creating Tabs with Bootstrap

Tabs are easy to create and also easy to use for user. This help to create user-friendly interface with lots of information compressed in respective tabs. Below is a working code for creating tabs. You can customize as per your need.
<!-- tabs -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Tab</h2><hr/>

Code for creating Accordion with Bootstrap

accordion contain many different sections. so you can collapse or expand the sections. Only one section can be opened at one time.
<!-- accordion -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Accordion</h2>

Code for creating Jumbotron, Image classes and Thumbnails

<!-- jumbotron -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="jumbotron">
                <h2>Jumbotron</h2>

Code for creating Forms with Bootstrap

Forms are essential element in web for interacting with the users. Forms also should be good enough to attract the user. So, forms should have good interface. Bootstrap provide nice interface and easy to control element. Below is a working code for a complete form:
<!-- Form -->

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Contact Form</h2>

Code for creating Modal with Bootstrap

Modal is a dialog box which appear whenever you click link or button. It faces in when you click and the rest of the content fades out.
<!-- modal -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <a data-toggle="modal" href="#myModal">Login</a>

Font awesome in Bootstrap

Font-awesome is an open source project which provide free font icons. These days everybody use font rather than using images because it is scalable and can be re-size to any size and change color to any. First type Font-awesome on Google and click on the first link. you will be taken to font-awesome site. You can see many icon there.
To get started, click on the "get started" menu
Copy the css link and paste it on your index page. This will import the fonts.

Code to create responsive Grid with Bootstrap

Grid system consist of rows and columns. Each row consist of single line and each column consist of 12 columns. If you try to add more columns than 12 column in single row, the column after 12th column will automatically go to new row.
<!-- grid -->
<div class="container">
    <div class="row">
        <div class="col-md-4"> <!--col-md-4 can be change as per your need -->
            <h2>First Heading</h2>

Code to create responsive carousel with bootstrap

Oh!!!  creating carousel(slide) was never been easy before bootstrap. Creating carousel with responsive design is really challenging with javascript or using other language. Bootstrap makes it really simple in creating carousel. Below is a running code for creating carousel:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicator">
<li data-target="#myCarousel" data-slide="0" class="active"></li>

Code to create responsive navigation bar with dropdown menu using bootstrap

Creating responsive navigation bar with dropdown menu in bootstrap is very simple. It is as easy to customize as to create it. Below is a running code for creating navigation bar(Menus) using bootstrap.
<!-- navbar with dropdown menu -->
<div class="navbar navbar-default navbar-fixed-top"> //creating fixed navbar menu you can change fixed to static
<div class="container">
<div class="navbar-header">