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:

Wednesday 30 September 2015

Responsive utility classes in Bootstrap

Responsive utility classes are used to hide or show some specific elements at specific screens. These are very useful classes for more info on these classes read the 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.

*****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-->
        <article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
            <h1>Services</h1>
            <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
            <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records.</p>
            <!-- nested row 3 starts here-->
            <div class="row">
        <!-- row 3 column 1 starts here -->
                <div class="col-md-3 col-xs-6">
                    <h4>Vaccinations</h4>
                    <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented.</p>
                    <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 1 ends here -->

         <!-- row 3 column 2 starts here -->
                <div class="col-md-3 col-xs-6">
                    <h4>Checkups</h4>
                    <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p>
                    <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 2 starts ends -->

         
                <div class="col-md-3 col-xs-6">
                    <h4>Senior Pets</h4>
                    <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p>
                    <p><a href="#">Read more >></a></p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <h4>Diet Plans</h4>
                    <p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet. </p>
                     <p><a href="#">Read more >></a></p>
                 </div>
            </div><!-- end nested row 3 -->
        </article>
        <aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
            <h3>Keeping your pet's chompers clean and healthy</h3>
            <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
            <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
         </aside>
    

        </div><!-- end row 2 -->
    
    <!-- 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>

</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:

Saturday 26 September 2015

Typography in bootstrap

Bootstrap provides us many classes to make our text looking much better and fancier. These classes are under the typography. Check the source code and read the official docs for more on typography classes.

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">
    <!-- column 1 of row 1 -->
        <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><!-- column 1 of row 1 ends -->
   
    <!-- column 2 of row 1 -->
        <div class="col-lg-6 col-sm-7">
            <img src="img/animals.jpg" alt="">
        </div>    <!-- column 2 of row 1 ends -->
    </header><!-- row ends here -->
    
    <!-- row 2 starts -->
    <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><!-- row 2 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>
                
                <!-- Blockquotes elements shows the text like a quote -->
                <blockquote>Tonto is severely allergic to over a dozen kinds of grass pollens. Thanks to Wisdom for the testing that tracked down his allergy!</blockquote>
            
            <p><a href="#">Read more >></a></p>
        </div><!-- column 1 of row 3 ends-->
    <!-- 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>
                <blockquote>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. </blockquote>
               
            <p><a href="#">Read more >></a></p>
         
        </div><!-- column 2 of row 3 ends-->

    <!-- 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>
                <blockquote>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. </blockquote>
            
            <p><a href="#">Read more >></a></p>
        </div>    <!-- column 3 of row 3 ends-->
    <!-- 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>
            <blockquote>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. </blockquote>
             <p><a href="#">Read more >></a></p>
         </div><!-- column 4 of row 3 ends -->
    </div><!-- row 3 ends here -->
    
    <!-- row 4 starts-->
    <footer class="row">

        <!-- small elements lowers the size of letters -->
         <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:

Thursday 24 September 2015

Jumbotron in Bootstrap

Jumbotron is a special area in which you can place your images of any content which want to be important. This area should be highly attract able for  the user.
Always use this to display pictures its a better idea.

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">
        <!-- row 1 column 1 starts --> 
        <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><!-- row 1 column 1 ends -->
        <!-- row 1 column 2 starts -->
        <div class="col-lg-6 col-sm-7">
            <img src="img/animals.jpg" alt="">
        </div><!-- row 1 column 2 starts ends -->

    </header><!-- row 1 ends -->

    <!-- row 2 starts here-->
    <div class="row">
    <!-- jumbotron is special attention area for viewers. you can place images or sliders or anything you want to give importance -->
        <div class="jumbotron">
            <!-- jumbotron image -->
            <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><!-- jumbotron div ends here -->
    </div><!-- row 2 ends here -->
    
    <!-- row 3 starts here -->
    <div class="row">
        <!-- row 3 column 1 starts -->
        <div class="col-md-3 col-xs-6">
            <p><img src="img/gsd.jpg" alt=""></p>
            <h4>Thanks for helping our German Shepherd</h4>
            <p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
            <p><a href="#">Read more >></a></p>
        </div>

        <!-- row 3 column 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>

        <!-- row 3 column 4 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>

        <!-- row 3 column 4 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>
    </div>
    
    <!-- row 4 starts here -->
    <footer class="row">
         <p>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.</p>
         <p>Wisdom Pet Medicine is a training brand owned by lynda.com.</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:

Wednesday 23 September 2015

Nesting Rows in Bootstrap

You can also nest row in some other row. This could help us to make the page more fancier with a little effort. View the source code and try it!!.
In this example row 3 is nested in column 1 of row 2.

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>
        <div class="col-lg-6 col-sm-7">
            <img src="img/animals.jpg" alt="">
        </div>

    </header><!-- row 1 ends -->
    
    <!-- row 2 satrts-->
    <div class="row">
    <!-- row 2 column 1-->
        <article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
            <h1>Services</h1>
            <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
            <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records.</p>

            <!-- row 3 starts -->
            <!-- row 3 is nested in row 2-->
       
            <div class="row">
        <!-- row 3 column 1-->
                <div class="col-md-3 col-xs-6">
                    <h4>Vaccinations</h4>
                    <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>
                    <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 1 ends-->

         <!-- row 3 column 2-->
                <div class="col-md-3 col-xs-6">
                    <h4>Checkups</h4>
                    <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p>
                    <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 2 ends-->
       
        <!-- row 3 column 3-->
                <div class="col-md-3 col-xs-6">
                    <h4>Senior Pets</h4>
                    <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p>
                    <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 3 ends-->

         <!-- row 3 column 4-->
                <div class="col-md-3 col-xs-6">
                    <h4>Diet Plans</h4>
                    <p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet. </p>
                     <p><a href="#">Read more >></a></p>
                </div><!-- row 3 column 4 ends-->
            </div><!-- row 3 ends here -->
            
        </article><!-- row 2 column 1 ends here -->
        <aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
            <h3>Keeping your pet's chompers clean and healthy</h3>
            <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
            <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
        </aside><!-- row 2 column 1 ends here -->
    </div><!-- end row 2 -->
    
    <!-- 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>

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

<!-- javascript bootstrasp files -->
    <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:

Tuesday 22 September 2015

Push and Pull classes in Bootstrap

Push and pull classes are used to change order of the columns of the rows. This is useful when we want to display something first on small screens where as that column is not first on large screens.

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">
    <!--column 1 of row 1-->
        <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><!-- column 1 ends here -->

    <!--column 2 of row 1-->
        <div class="col-lg-6 col-sm-7">
            <img src="img/animals.jpg" alt="">
        </div><!-- column 2 ends here -->

    </header><!-- header ends here -->
    
    <!-- row 2 starts-->
    <div class="row">
        <!-- column 1 of row 2-->
        <!-- maximise and minimise the browser to see how push and pull classes works-->
        <!-- article tag is PUSHED 3 grids away. when the screen size is smaller then this article will display first rather than last-->
        <article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
            <h1>Services</h1>
            <p><img src="img/cockatiel.jpg" class="pull-right">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
            <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records.</p>
        </article><!-- column 1 ends here-->

    <!-- column 2 of row 2 -->
        <!-- aside tag is PULLED 9 grids -->
        <aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
            <h3>Keeping your pet's chompers clean and healthy</h3>
            <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
            <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
         </aside><!-- column 2 ends here-->

    </div><!-- row 2 ends here -->
    
    <!-- row 4 for footer-->
    <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><!-- footer ends here-->

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

<!-- javascript file of bootstrap-->
    <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)