I'm encountering a problem similar to what was discussed in Issue with Bootstrap grid in Rails (and other related threads), but the suggested solution isn't resolving my issue. Despite using Bootstrap 3 classes with the Bootstrap 3 gem, I'm unsure why it's still not functioning properly.
My Gemfile includes:
gem 'bootstrap-sass', '~> 3.1.1.0'
gem 'sass-rails', '~> 4.0.0'
In custom.css.scss:
@import "bootstrap";
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>TEi-LS Data Tracker</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |key, value| %>
<%= content_tag(:div, value, class: "alert alert-#{key}") %>
<% end %>
<%= yield %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
home.html.erb:
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">5</div>
<div class="col-md-4">6</div>
</div>
Instead of displaying as a grid, the output appears stacked vertically:
1
2
3
4
5
6
This is my first time posting a question, so hopefully I've provided enough detail. Appreciate any assistance you can offer. Thank you.