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.
<!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>
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*****
<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>
No comments:
Post a Comment