BootStrap Overview: September 2015

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:

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

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

<!doctype html>

<html>

<!-- head starts here -->

<head>

    <meta charset="utf-8">

    <title>My Website</title>

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


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

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

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

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:

Download bootstrap files from here
Place them into your html templates folder or where you want to use.
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>

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:

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

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

<!doctype html>

<html>

<!-- head starts here -->

<head>

    <meta charset="utf-8">

    <title>My Website</title>

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

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

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:

Download bootstrap files from here
Place them into your html templates folder or where you want to use.
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 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 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 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>

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

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:

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

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

<!doctype html>

<html>

<!-- head starts here -->

<head>

    <meta charset="utf-8">

    <title>My Website</title>

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


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

        <!-- 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-->




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

Monday 21 September 2015

Adjusting Column Width With Offsets in Bootstrap

You can change the order of the columns in rows by using OFFSET with grid system. Remember offsets are always applied on left of the html element. Change the screen size to see the effect of using offsets. Do some changes and examine the results.

Requirements:

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

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>My Website</title>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">

</head>

<body>
<div class="container">

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

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

    </header>

    
    <div class="row">
        
       
       
       <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’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’s diagnostic results, treatment plans, vaccination and   diagnostic schedules, prescriptions, and any other health records.</p>
        </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>

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


   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
</body>
</html>

Sunday 20 September 2015

Rows and Columns in Bootstrap

In bootstrap web page can be suppose as a table. As every table has rows and columns the web page also will has rows and columns. For more information please refer to Official docs here

Requirements:

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

*****Source Code*****

<!doctype html>

<html>

<!-- head starts here -->

<head>

    <meta charset="utf-8">

    <title>My Website</title>

    <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 with header-->

    <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><!-- column 2 ends here -->

    </header><!-- header ends here -->

    <!-- row 2 starts-->

    <div class="row">

         <aside class="col-lg-3 col-sm-4">

<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 1 ends here -->

         <!-- Offset always applys on left of the markup Here we have offset of 1 grid-->


<article class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">

            <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 2 ends here -->

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

    <!-- row 3 starts with footer-->

    <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><!-- 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>

Saturday 19 September 2015

Bootstrap Grid System

Now you can learn by siting at your home. The only things you require are your PC or Laptop, INTERNET connection and your knowledge. In this series we will make a real estate website as a example to understand BootStrap responsive framework. Bootstrap is a framework for front-end development. This makes our web pages responsive. To learn this you have to know at least basics of HTML, CSS and JAVASCRIPT. For more information you can visit Bootstrap's official docs.

My recommendation to you is always use official docs.

Now let's start with making our first template called index.html. This will our basic template which will inherited by other templates and you will learn this during this series. We will going to use Bootstrap framework for front-end development and FLASK with PYTHON for back-end development.

Requirements:

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

Let's start with Grid system in bootstrap which is very importent to make a wep page responsive.

* You can use your own images also. *
* Refer official docs side by side here. *

************************Source code for grid.html*****************************


<!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. bootstrap.min.css is computer understandable and bootstrap.css is human understandable so it is good embed both files.-->



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




    <!-- row 1 starts here for header-->


    <header class="row">


        <!-- column 1 of row 1 using lg and sm Grid system --> 

        <div class="col-lg-6 col-sm-6" style="border: 2px solid;">


            <a href="#"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>


        </div>


        <!-- column 2 of row 1 using lg and sm grid system --> 

        <div class="col-lg-6 col-sm-6">


            <img src="img/animals.jpg" alt="">


        </div>


        


    </header><!-- header ends here -->




    <!-- row 2 starts here -->


    <div class="row">


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


    


    <!-- row 3 starts-->


    <div class="row">


        <!-- column 1 of row 3 using lg, md, xs grid systems--> 

        <div class="col-lg-3 col-md-4 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><!-- column 1 ends here -->


        <!-- column 2 of row 3 using lg, md, xs grid system --> 

        <div class="col-lg-3 col-md-4 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 ends here -->


       

        <!-- column 3 of row 3 using lg, md, xs grid system --> 

        <div class="col-lg-3 col-md-4 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 ends here -->




        <!-- column 4 of row 3 using lg, md, xs grid system --> 

        <div class="col-lg-3 col-md-4 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 ends here -->




    </div><!-- End Of Row 3 -->




    <!-- row 4 for footer -->


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




</div><!-- End Of Container div -->




<!-- 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>

    <!-- javascript file --> 

    <script src="js/bootstrap.min.js"></script>


</body>

</html>

**********OUTPUT WILL**********