1

I am following Michael Hartl's Ruby on Rails tutorial currently but decided to work with the newest Twitter Bootstrap 3. I am just experimenting around with the grid system but I can't seem to get the cols, no matter if it is col-sx-, col-sm-, col-md- or col-lg- to appear beside each other. I am using the sass-rails 4.0.1 gem and bootstrap-sass 3.0.3.0.

Here's my code:

<div class="container">
<div class="row">
    <div class="col-md-1">
        <h1>L</h1>
    </div>
    <div class="col-md-1">
        <p>HH</p>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        <h1>LOGO</h1>
    </div>
    <div class="col-md-7">
        <a href="#">Some Link</a>
        <a href="#">Some Link</a>
    </div>
</div>
</div>

and this is how it is rendered: https://i.stack.imgur.com/JSOJE.jpg

How do I get the columns to appear beside each other as they should?

Aventuris
  • 630
  • 5
  • 21

2 Answers2

1

Your HTML code is correct from Bootstrap's perspective, so your problem is most likely coming from how you load the bootstrap library.

Do you have access to other Bootstrap features?

If yes, then check if you're not overriding the .row class with another library (jquery-ui for instance).

If no try one of these:

  • Check if your scss/sass stylesheet has @import "bootstrap"; (needed for bootstrap-sass to work as indicated its manual)
  • Try to load Bootstrap locally: place the bootstrap.js and bootstrap.css files in vendor/assets/javascripts and vendor/assets/stylesheets and add them in your application.js file (//= require bootstrap) and in your application.css file (*= require bootstrap)
Gabriel S.
  • 1,961
  • 2
  • 20
  • 30
  • The code isn't correct. They have 2 1-columns on top of the 12 columns. I'll explain more in my answer. – nil Jan 15 '14 at 18:42
  • 1
    Yes, the first row doesn't add up to 12 like it normally should. I didn't mention it because Bootstrap still renders the grid from left to right if all cells aren't specified. This is not the cause of his problem. – Gabriel S. Jan 15 '14 at 18:53
  • It appears that other bootstrap features work as intended. The container class centres it properly and the headings and links work as intended as well. I don't believe there is a chance for .row to be overridden because bootstrap 2.3 that I used before worked without a problem and also made use of it. – Aventuris Jan 15 '14 at 19:05
  • When you inspect the md1 grid divs, do you see the CSS applied from bootstrap.css? It should be `@media (min-width: 992px) .col-md-1 { width: 8.333333333333332%;}`. Note that if your container has a width lower than 992px, the grid becomes fluid and the cells stack vertically. You can have rows without wrapping them in containers in you want a grid that's smaller than 992px without becoming fluid. – Gabriel S. Jan 15 '14 at 19:14
1

Bootstrap is a 12-column grid system. Each row is gowing to have to add up to 12. You have (2) 1 Columns stacked on a 5 and 7. The sum of 5 and 7 is 12. By the looks of it, you're trying to have a nav bar.

Checkout the bootstrap examples on how this works: 

    http://getbootstrap.com/css/#grid

Here is a decent example of a starter template from Start Boot Strap

  http://startbootstrap.com/landing-page

Here is the index file: 

  https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/landing-page/index.html

Check out the nav-bar. Also notice how each row or container adds up to 12?

nil
  • 2,238
  • 1
  • 19
  • 28
  • I do understand that they need to add up to 12, I simply made them 1-columns to show that the margins or paddings weren't the problem. In the second row they do add up to 12 and they still do not sit beside each other. – Aventuris Jan 15 '14 at 19:01
  • 1
    You can check this http://jsfiddle.net/bkC73/1/ for reference, although the Output window needs to be resized to higher than 920px, otherwise the grid becomes responsive and the cells stack vertically. – Gabriel S. Jan 15 '14 at 19:06
  • 1
    I've added a random snippet of css from your fiddle and all of a sudden they appeared beside each other, so I removed the css and now they still do. Very very odd but it works now. Thanks for the help guys. – Aventuris Jan 16 '14 at 12:57