bootstrap rows and columns not working

Question

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?

You're probably not including the CSS properly. Are you clicking the big "Download Bootstrap" button from http://getbootstrap.com/getting-started/ ? You can also use the CDN just below that to get started. Second, make sure the ONLY elements inside a `.row` are `.col-` elements. Otherwise your margins will be screwed up. — Khan, Jul 25 '14 at 19:01
Actually there's nothing wrong with your code. All you have to do is increase the size of your browser(if you are viewing it in a small window spread it across the entire desktop), then you'd see it as how it was meant to be displayed. — KHKR, May 28 '17 at 06:21

score 26 · Answer 1 · edited Oct 13 '17 at 14:01

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:

Everything gets wrapped in a container class;
The row class immediately comes next and can contain a maximum of 12 columns in it. If you want to add more, add another 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.

OP is following a tutorial, I can tell by the way the code is structured. Also because I did the exact same tutorial when I started BS. More than likely, OP has yet to learn about the grid system. — BuddhistBeast, Jul 25 '14 at 20:45
it took me a while to understand that you mean Bootstrap when you said BS. — Mohit Kanwar, Apr 02 '20 at 08:18
Great answer. I didn't know that we had to always put things into container -> row for this to work. — MachineLearner, May 16 '22 at 16:28

score 7 · Answer 2 · edited May 23 '17 at 12:34

7

I had the exact same problem. I used col-sm-*instead of col-md-* and it works.

here is some reference: What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

edited May 23 '17 at 12:34

Community

1
1

answered Jul 18 '16 at 05:56

Deke

4,451
4
44
65

score 2 · Answer 3 · answered Jul 25 '14 at 20:42

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

DEMO JSFiddle

score 0 · Answer 4 · answered Aug 11 '15 at 12:21

This is because when you have fixed the navbar at the top the content after that in the body section will start from top most pixel of the browser window and is right now hidden behind your navigation bar. in your class container in which you have specified the rows and columns give them style="margin-top:100px " this 100px could be any px according to your size of the navbar. Try with 100px only and the rows will appear.

score -2 · Answer 5 · edited Jan 07 '15 at 18:39

-2

In the link for bootstrap.min.css Make sure to reference relatively to the directory "dist/css/bootstrap.min.css"

edited Jan 07 '15 at 18:39

Philippe Boissonneault

3,949
3
26
33

answered Jan 07 '15 at 17:37

rob

9

bootstrap rows and columns not working

5 Answers5

DEMO JSFiddle

Linked