Menu
No matter what I seem to do the content is never displayed in columns, always just a vertical stack. Can you guys double check my code? Maybe it's something I'm missing?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/respond.js"></script>
</head>
<body>
<!-- row 1 -->
<div class="row">
<a href="#"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
<img src="img/animals.jpg" alt="">
</div>
<!-- end row 1 -->
<!-- row 2 -->
<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 -->
<!-- row 3 -->
<div class="row">
<div class="col-md-3">
<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>
<div class="col-md-3">
<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>
<div class="col-md-3">
<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>
<div class="col-md-3">
<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>
<!-- end row 3 -->
<!-- row 4 -->
<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>
<!-- end row 4 (footer) -->
<!-- javascript -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Also...the Bootstrap 3 files I downloaded from their home page are encrypted? I've been unable to move them, copy them or edit them?
I tried to right-click > properties > advanced > un-check encryption
but it told me I don't have permission? Is there a way to fix this?
444
Bootstrap is an awesome framework, though while using it, you must know that there are certain classes that are a must, for you to know. Let me run you through a couple important ones.
Containers and rows are very important classes if you want your Bootstrap pages to be responsive.
Here are a few rules you need to follow when using Bootstrap:
row class and then inside the row, declare the number of col's you want.To elaborate on what I said, take a look below
<div class="container">
<div class="row">
<div class="col-md-3">
<h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12
so i have another 9 columns more i can create and after that i will have to declare another
"row " class , though I can declare the new row class in the same container
</h1>
</div>
<div class="col-md-3">
<h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12
so i have another 6 coloums more i can create and after that i will have to declare another
"row " class , though i can declare the new row class in the same container
</h1>
</div>
<div class="col-md-3">
<h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12
so i have another 3 coloums more i can create and after that i will have to declare another
"row " class , though i can declare the new row class in the same container
</h1>
</div>
<div class="col-md-3">
<h1>hey hey i span 3 coloumbs and bootstrap allows a maximum of 12
so i have another 0 coloums more i can create and after that i will have to declare another
"row " class , though i can declare the new row class in the same container
</h1>
</div>
<!-- now that we have used up all the 12 coloumbs in this row , lets go create a new "row class" , Alas in the same container -->
</div> <!-- end of row -->
<div class="row">
<div class="col-md-12">
<h1>I am a col , that spans the entire 12 coloumbs that this row had to offer , by now you should know that if you want to create another coloumb , you have to go create another "row" class</h1>
</div>
</div>
</div> <!-- end of container -->
Now copy the above code if you can't view it here and paste it in your text editor, compare your code, and mine and check where you haven't added the container and row classes and add them. Bootstrap is a great framework, but there are certain classes that you must add and they are a must or else Bootstrap just won't work.
Hope this solves your problem, I could have easily edited your code and told you what's wrong, but I thought it was more important for you to know the structure of Bootstrap code.
Also, coming to your last point, working locally, a downloaded copy is always better than a CDN, avoid fiddling with the Bootstrap.css file unless you know what you're doing, write a separate CSS file that overrides the existing Bootstrap code. Make a Google search for "GitHub Bootstrap 3.0" and go download the bootstrap.css file locally, and it's all ready to be edited.
164
Try a different approach to adding in the files - directly link them via your head tag. Put the following in your head section; it was pulled straight from the website:
HTML (Head Section):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
This will link all of the necessary files to your HTML. However, you can add the last link (javascript) to the bottom of your body tag, just before you end it, for performance. To show you that your syntax is correct, follow the below link to see the demo I have produced that shows your exact code working with BootStrap 3.2. This should have been covered in the Lynda Exercises you are trying to complete ;)
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
