Sunday 25 October 2015

Breadcrumbs in Bootstrap

Breadcrumbs in bootstrap are used to show a queue of navigation links to tell the user where he/she is. Try the example to see how it works and for more info refer here

*****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">

    <style type="text/css">
        /* it removes the '/' after every item in ol.*/
        .breadcrumb > li + li:before {
            content: none;
        }

        /*it make the active link color red.*/
        .breadcrumb > li > .active {
            color: red;
        }
    </style>

   
</head><!-- head ends here -->

<body>
    <!-- container class of bootstrap make the content of the page centralised -->
    <div class="container">
        <!-- row 1 starts here-->
        <div class="row">
            <!-- column 1 of row 1 starts here-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                <h1>Implementing Breadcrumbs:</h1>

                <!-- always use ordered list in breadCrumbs-->
                <ol class="breadcrumb">
                    <li><a href="#">HOME </a><span class="glyphicon glyphicon-circle-arrow-right"></span></li>
                    <li><a href="#">ABOUT US</a></li>
                    <li><a href="#" class="active">CONTACT US</a></li>
                </ol><!-- ordered list ends here-->
               
            </div><!-- column 1 of row 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>
Posted by at No comments:
Labels:

Thursday 22 October 2015

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>
Posted by at No comments:
Labels:

Sunday 11 October 2015

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>
Posted by at No comments:
Labels:

Thursday 8 October 2015

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>
Posted by at No comments:
Labels:

Tuesday 6 October 2015

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>
Posted by at No comments:
Labels:

Sunday 4 October 2015

More On Bootstrap Buttons

You can apply many other classes to make your buttons for impressive for example btn-block etc. Check this code and see how anchor tag(<a>) is can be modified for different sizes and colors.

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>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>
<div class="container">
    <!-- row 1 starts  -->
    <header class="row">
        <div class="col-lg-6 col-sm-5">
            <a href="index.html"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
        </div>
    <!-- hidden-xs is a responsive utility that hides the specific element at the Xtra Small Screen .thats why animals.jp hides at XS-->
        <div class="col-lg-6 col-sm-7  hidden-xs">
            <img src="img/animals.jpg" alt="">
        </div>

    </header><!-- row 1 ends -->
   
    <!-- row 2  starts here-->
    <div class="row">
    <!-- row 2 column 1 starts here-->
    <div class="jumbotron">
        <img src="img/jumbotron.jpg" alt="" class="pull-right">
        <h1> We treat your pets like our own</h1>
        <p>At Wisdom Pet Medicine, we strive to blend the best in traditional   and alternative healing techniques to diagnose and treat companion   animals, including dogs, cats, birds, reptiles, rodents, and fish. </p>
    </div><!-- column 1 ends here -->
    </div><!-- row 2 ends here-->

    <!-- row 3 starts here -->
    <div class="row">
    <!-- column 1 of row 3 -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/gsd.jpg" alt=""></p>
            <h4>Thanks for helping our German Shepherd</h4>
            <blockquote>
              <p>Tonto is severely allergic to over a dozen kinds of grass pollens. Thanks to Wisdom for the testing that tracked down his allergy!</p>
            </blockquote>
            <p><a href="#" class="btn btn-warning btn-lg">Read more >></a></p>
        </div><!-- column 1 of row 3 ends here -->

    <!-- column 2 of row 3 -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/kitten.jpg" alt=""></p>
            <h4>Our diabetic kitty is better</h4>
            <p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
            <p><a href="#" class="btn btn-success btn-xs">Read more >></a></p>
        </div><!-- column 2 of row 3 ends here -->

    <!-- column 3 of row 3 -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/bulldog.jpg" alt=""></p>
            <h4>Our grape-loving dog</h4>
            <p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
            <p><a href="#" class="btn btn-primary btn-block">Read more >></a></p>
        </div><!-- column 3 of row 3 ends here -->

    <!-- column 4 of row 3 -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/goldfish.jpg" alt=""></p>
            <h4>A dog antibiotic cured our fish</h4>
            <p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
             <p><a href="#" class="btn btn-info">Read more >></a></p>
         </div><!-- column 4 of row 3 ends here -->
    </div><!-- row 3 ends here -->
   
    <!-- row 4 starts-->
    <footer class="row">
         <p><small>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</small></p>
         <p><small>Wisdom Pet Medicine is a training brand owned by lynda.com.</small></p>
    </footer><!-- row 4 ends here -->

</div> <!-- end container -->

<!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
 
Posted by at No comments:
Labels:

Friday 2 October 2015

Buttons in Bootstrap

You can make more impressive button with bootstrap classes using btn classes. You can make a fancy button of links also and buttons too. For more on btn classes refer to official docs and do some fun.

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>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>
<div class="container">
    <!-- row 1 starts  -->
    <header class="row">
        <div class="col-lg-6 col-sm-5">
            <a href="index.html"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
        </div>
    <!-- hidden-xs is a responsive utility that hides the specific element at the Xtra Small Screen .thats why animals.jp hides at XS-->
        <div class="col-lg-6 col-sm-7  hidden-xs">
            <img src="img/animals.jpg" alt="">
        </div>

    </header><!-- row 1 ends -->
    
    <!-- row 2  starts here-->
    <div class="row">
    <!-- row 2 column 1 starts here-->
    <div class="jumbotron">
        <img src="img/jumbotron.jpg" alt="" class="pull-right">
        <h1> We treat your pets like our own</h1>
        <p>At Wisdom Pet Medicine, we strive to blend the best in traditional   and alternative healing techniques to diagnose and treat companion   animals, including dogs, cats, birds, reptiles, rodents, and fish. </p>
    </div><!-- column 1 ends here -->
    
    <!-- row 3 starts-->
    <div class="row">
    <!-- column 1 of row 3 -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/gsd.jpg" alt=""></p>
            <h4>Thanks for helping our German Shepherd</h4>
            <blockquote>
              <p>Tonto is severely allergic to over a dozen kinds of grass pollens. Thanks to Wisdom for the testing that tracked down his allergy!</p>
            </blockquote>
        <!-- btn class is used to make a button. you can make button of link, button, list item or anything else to which you can apply btn  class-->
            <p><a href="#" class="btn btn-primary btn-sm">Read more >></a></p>
        </div><!-- column 1 of row 3 ends here -->
   
    <!-- column 2 of row 3 starts-->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/kitten.jpg" alt=""></p>
            <h4>Our diabetic kitty is better</h4>
            <p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
            <p><a href="#">Read more >></a></p>
        </div><!-- column 2 of row 3 ends-->

    <!-- column 3 of row 3 starts-->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/bulldog.jpg" alt=""></p>
            <h4>Our grape-loving dog</h4>
            <p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
            <p><a href="#">Read more >></a></p>
        </div><!-- column 3 of row 3 ends-->

    <!-- column 4 of row 3 starts-->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/goldfish.jpg" alt=""></p>
            <h4>A dog antibiotic cured our fish</h4>
            <p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
             <p><a href="#">Read more >></a></p>
         </div>    <!-- column 4 of row 3 ends-->
    </div><!-- row 3 ends here -->
    
    
    <!-- row 4 -->
    <footer class="row">
         <p><small>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</small></p>
         <p><small>Wisdom Pet Medicine is a training brand owned by lynda.com.</small></p>
    </footer><!-- end of footer-->

</div> <!-- end container  here-->

<!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)