Styling Tables with Bootstrap

Bootstrap makes it very easy to improve your tables with use of some simple classes. its just very easy just apply these classes to see how easily tables can be styled. For more refer here.

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>Title here</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: 7px ridge;">
        <!--row 1 starts here -->
        <div class="row" style="padding: 10px;">
            <!--column 1 of row 1 starts-->
            <div class="col-lg- col-md- col-sm- col-xs- ">
              
                <h1>Styling a table using Bootstrap:</h1>

                <!-- table starts here-->
                <!-- check all thses classes which makes a table look good very easily. its very easy -->
                <!-- always use table-responsive class-->
                <table class="table table-bordered table-striped table-hover table-condensed table-responsive">
                    <!-- table heading starts here -->
                    <thead>
                        <!-- class success gives the light green colour to whole row. check out all other contextual classes.-->
                        <tr class="success">
                            <th>
                                First name
                            </th>
                            <th>
                                Last name
                            </th>
                            <th>
                                e-mail
                            </th>
                        </tr>
                    </thead><!-- table heading ends here -->
                    <!-- table body starts here-->
                    <tbody>
                        <tr>
                            <td>
                                jon
                            </td>
                            <td>
                                doe
                            </td>
                            <td>
                                example@gmail.com
                            </td>
                        </tr>
                        <tr>
                            <td>
                                shon
                            </td>
                            <td>
                                doe
                            </td>
                            <td>
                                example1@gmail.com
                            </td>
                        </tr>
                        <tr>
                            <td>
                                don
                            </td>
                            <td>
                                doe
                            </td>
                            <td>
                                example2@gmail.com
                            </td>
                        </tr>
                    </tbody><!-- table body ends here -->
                </table><!-- table ends here-->
            </div><!-- column 1 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>

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>