5

First of all I should mention that I'm rather new to this.

I'm trying to get my columns to show horizontally, like this:

 first column                     second column

Instead they are showing like this:

 first column
 second column

Here is my code:

<div class="container">
    <div class="row">
         <div class="col-md-8">
             first column
         </div>
         <div class="col-md-4">
             second column
         </div>
    </div>
</div>

If I replace the col-md- with span so the div classes are span8 and span4 then it works properly. Of course I'm using Bootstrap 3 so I shouldn't be using span but I thought it was interesting to know.

ari gold
  • 2,074
  • 3
  • 25
  • 51

1 Answers1

4

Your syntax is correct. Demo

It is the intended functionality of the grid system to wrap (stack vertically) depending on the viewport (Browser screen-width). For instance, using the col-md- class, your columns will be inline (Horizontal) on a 992px or greater viewport. Anything less than 992px, the columns will wrap.

Maybe your monitor or browsers width wasn't greater than 992px while testing your code. IE8 can have the same issue (regardless of viewport) if you are not using Respond.js correctly...

If you NEVER want them to wrap try using the col-xs- classes. Demo

Side-Note: span elements are inline elements and div are block elements by default, which is why it worked with spans. See this question for more info.

EDIT: I misread your question at first (The part about span classes)... span4 classes only exist in bootstrap 2.x, so you must be includeing the wrong version of bootstrap in your project. Check your bootstrap CSS file and make sure you are using the correct version.

Community
  • 1
  • 1
Schmalzy
  • 17,044
  • 7
  • 46
  • 47
  • Odd. I see (clearly) that it works in your jsfiddle but I can't get it to work in my code, using exactly the same syntax. Maybe it's because I'm actually the `application.html.erb` layout in Ruby on Rails but still, hmmm. Try as I might I can't get the two columns to appear horizontally. – ari gold May 06 '14 at 23:02
  • 1
    @arigold Please see my edit above, you must be using the wrong version of Bootstrap. – Schmalzy May 06 '14 at 23:05
  • Indeed, it's the wrong version. I had incorrectly assumed that a github repo authored 9 days ago was up to date. Off to find out how to integrate Bootstrap 3 into Rails 4 properly. – ari gold May 06 '14 at 23:26
  • Thanks @Schmalzy that answered it for me. – 208_man May 31 '19 at 17:41