Image Gallery using Thumbnail

Thumbnail class is used to make the images look better. It can use to make various image galleries.

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>Thumbnail of Images</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>

<!-- thumbnail class helps us to make the images look better. it can use for making various type of image gallery.-->

    <!-- container class of bootstrap make the content of the page centralised -->
    <div class="container" style="border: 3px groove; margin-top: 7px;">
        <h1 style="color: green;">Image gallery using thumbnail class:</h1>
        <!-- row 1 starts -->
        <div class="row">

            <!-- column 1 of row 1 starts -->
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">

                <!-- thumbnail div starts -->
                <div class="thumbnail">

                    <img src="img/dog.jpg" alt="dog-img" class="img-responsive">

                    <!-- caption div for image starts-->
                    <div class="caption">
                        <p>Caption about image is here.</p>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-success">Button</button>
                    </div><!-- caption div for image ends-->

                </div><!-- thumbnail div ends -->

            </div><!-- column 1 ends here -->

            <!-- column 2 of row 1 starts -->
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">

                <!-- thumbnail div starts -->
                <div class="thumbnail">

                    <img src="img/dog.jpg" alt="dog-img" class="img-responsive">

                    <!-- caption div for image starts-->
                    <div class="caption">
                        <p>Caption about image is here.</p>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-success">Button</button>
                    </div><!-- caption div for image ends-->

                </div><!-- thumbnail div ends -->

            </div><!-- column 2 ends here -->

            <!-- column 3 of row 1 starts -->
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">

                <!-- thumbnail div starts -->
                <div class="thumbnail">

                    <img src="img/dog.jpg" alt="dog-img" class="img-responsive">

                    <!-- caption div for image starts-->
                    <div class="caption">
                        <p>Caption about image is here.</p>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-success">Button</button>
                    </div><!-- caption div for image ends-->

                </div><!-- thumbnail div ends -->

            </div><!-- column 3 ends here -->

            <!-- column 4 of row 1 starts -->
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">

                <!-- thumbnail div starts -->
                <div class="thumbnail">

                    <img src="img/dog.jpg" alt="dog-img" class="img-responsive">

                    <!-- caption div for image starts-->
                    <div class="caption">
                        <p>Caption about image is here.</p>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-success">Button</button>
                    </div><!-- caption div for image ends-->

                </div><!-- thumbnail div ends -->

            </div><!-- column 4 ends here -->
        </div><!-- row 1 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>

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>