Simple Two-Column Layout with Bootstrap-SASS Rails

Question

I want a simple two-column layout. With the code below, the columns are not side by side but instead are following the html default block-level flow. I am wondering if I am missing some step with installing bootstrap-sass into the rails app.

Relevant Gems in Gemfile:

gem 'sass-rails'
gem 'bootstrap-sass', '~> 3.3.1.0'
gem 'autoprefixer-rails'
gem 'simple_form'

app/assets/stylesheets/application.css.scss

/*
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

app/views/layouts/application.html.erb

<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span8">
                <%= yield %>
            </div>
            <div class="span4">
                <h2> Should be the sideBar</h2>
                <p> 
                    Contain within the second column.
                </p>
            </div>
        </div>
    </div>
</body>

Neil Neil · Accepted Answer · 2015-01-05T19:15:19

As mentioned by Christina above, Bootstrap 3 has different class names for the grid, so class names "span8" and "span4" will not work with Bootstrap 3. Also mentioned by Christina, the class "row-fluid" needs to be just "row." Here is a quick fix:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8">
            <%= yield %>
        </div>
        <div class="col-xs-4">
            <h2> This is the sidebar</h2>
            <p> 
                This is inside the sidebar.
            </p>
        </div>
    </div>
</div>

Simple Two-Column Layout with Bootstrap-SASS Rails

1 Answers