Recently, I incorporated Bootstrap into an older Rails project to utilize the grid system for aligning the main content and sidebar. Here's a code snippet from my "view" file (index.html.erb).
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div id="featured_gallery" class="wide_content_box rounded_border">
<%= content_tag :div do %>
<%= content_tag :span, :class => "results_head" do %>
<%= _('Featured gallery') %>: <%= link_to(truncate(h(@featured_gallery.name), :length => 30), @featured_gallery) %>
<% end -%>
<%= more_link(galleries_path(:filter => 'featured')) %>
<% end %>
<%= render :partial=> "projects/project", :collection=> @featured_gallery_projects %>
<div class="clear">
</div>
</div>
</div>
<div class="col-md-4">
<div id="greeting">
<div id="hi">
<%= user_thumbnail(current_user, :thumb_tiny) %><%= random_hi %>
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
However, attempting to align these two sections next to each other led to unexpected results. Any insight on how to correct this alignment issue would be greatly appreciated. Ideally, the online users section, featured gallery, and others should appear in a column to the right of the primary content.
UPDATE: The divs are properly nested. To test, I added another row above the existing one with the following code:
<div class="row">
<div class="col-xs-4">
First column!
</div>
<div class="col-xs-4">
"Second column"
</div>
<div class="col-xs-4">
Third column!
</div>
</div>
Even this setup resulted in the three columns stacking on top of each other rather than appearing side by side in the same row. This unexpected behavior is confusing, as I believe I followed the grid system instructions correctly. Any thoughts?
Note: While the code functions as desired on Bootply, it fails to work on the web project I am currently developing.
PS: Bootstrap was installed via a gem, which included bootstrap_and_overrides.css.less in my stylesheets. However, my application.css file does not mention Bootstrap at all (it does not require any Bootstrap CSS files). Since installing the gem is meant to handle everything related to Bootstrap, I did not modify it. Could I be overlooking something? Should application.css require Bootstrap for proper functionality?