Glyphicons in Bootstrap

Glyphicons are very useful to make small things useful in our web page. There are plenty of glyphicons available by bootstrap check the official site and use according to your need.

Requirements:

1. Download bootstrap files from here
2. Place them into your html templates folder or where you want to use.
3. Basic knowledge of HTML, CSS and JAVASCRIPT.

 *****SOURCE CODE*****

 <!doctype html>
<html>
<!-- head starts here -->
<head>
    <meta charset="utf-8">
    <title>Glyphicons</title>
    <!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap linking to our html page -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
   
</head><!-- head ends here -->

<body>
<!-- container class of bootstrap make the content of the page centralised -->
    <div class="container" style="border: 1px groove; border-width: 7px; margin-top: 10px; padding: 10px;">

    <h1>Glyphicons Examples</h1>
    <!-- glphicons are mostly used in span tag. here is simple envelope glypficon there are plenty of these available-->
    <p>Simple glyphicon: <span class="glyphicon glyphicon-envelope"></span></p>

    <!-- the same above given glyphicon but here act as link -->
    <p>Glyphicon as a link: <a href="https://www.google.co.in/?gfe_rd=cr&ei=7oQWVoftLbTv8we3rpaYBA" target="_blank"><span class=" glyphicon glyphicon-globe"></span></a></p>

    <!-- glyphicon in buttons-->
    <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> search</button>
   
    </div><!-- End Of div Container-->

    <!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
    <!-- jquery file -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Images

Bootstrap has classes to make images look better on our web page. These images can be rounded, circle and thumbnails. img-responsive class is used to make image responsive for all screen sizes always use this class for images.
For more on images please refer to official docs.

Requirements:

1. Download bootstrap files from here
2. Place them into your html templates folder or where you want to use.
3. Basic knowledge of HTML, CSS and JAVASCRIPT.

NOTE: These images are not valid when you use this code please use your images.

*****SOURCE CODE*****

<!doctype html>
<html>
<!-- head starts here -->
<head>
    <meta charset="utf-8">
    <title>My Website</title>
    <!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap linking to our html page -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
   
</head><!-- head ends here -->

<body>
<!-- container class of bootstrap make the content of the page centralised -->
    <div class="container">
        <!-- img-responsive class make the image responsive on all screen sizes. Caption class is used to give a caption to a image-->

        <!-- image using img-rounded starts-->
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <img src="img/dog.jpg" alt="" class="img-rounded img-responsive" width="250" />
            <div class="caption">
                <h4>img-rounded class makes the corners of the image rounded.</h4>
            </div>
        </div><!-- rounded images ends here -->

        <!--image using img-circle starts-->
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <img src="img/dog.jpg" alt="" class="img-circle img-responsive" width="250" />
            <div class="caption">
                <h4>img-circle class makes a circle around the image.</h4>
            </div>
        </div><!-- img-circle ends here -->

        <!--image using img-thumbnail-->
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <img src="img/dog.jpg" alt="" class="img-thumbnail img-responsive" width="250" />
            <div class="caption">
                <h4>img-thumbnail class makes image look like a thumbnail.</h4>
            </div>
        </div><!-- img-thumbnail ends here -->
    </div><!-- End Of div Container-->

    <!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
    <!-- jquery file -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>