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>

No comments:

Post a Comment