bootstrapのグリッド処理が機能せずに一列表示になる

前提・実現したいこと

rails + htmlでFoodモデルの中にある全要素をグリッドを使って一行に3つ、または2つ表示させるというプログラムを組みたいです。

発生している問題・エラーメッセージ

bootstrap通りにプログラムを組んでいるのですが画面が一列に並んでしまっていて、レスポンシブ対応にできません。

該当のソースコード

index.html.erb
1<h1>トップページ</h1>
2<div class="container">
3  <div class="row">
4    <div class="col-sm-6 col-md-4">
5      <% @foods.each do |food| %>
6        <div class="thumbnail">
7          <img src="..." alt="...">
8          <div class="caption">
9            <h4><%= food.title %></h4>
10            <p><%= food.content %></p>
11            <p><%= link_to "編集", edit_food_path(food), class: "btn btn-primary" %> <%= link_to "削除", food, class: "btn btn-primary", method: :delete %></p>
12          </div>
13        </div>
14      <% end %>
15    </div>
16  </div>
17</div>

application.html.erb
1<body>
2      <nav class="navbar navbar-default">
3          <div class="container-fluid">
4            <!-- Brand and toggle get grouped for better mobile display -->
5            <div class="navbar-header">
6              <a class="navbar-brand" href="/foods">Health & Muscle delivery</a>
7            </div>
8              <%= link_to "メニュー一覧", foods_path %>
9              <%= link_to "メニューの追加", new_food_path  %>
10            <button type="button" class="btn btn-default navbar-btn">Sign in</button>
11        </div>
12      </nav>
13    <%= yield %>
14  </body>

gemfile
1...省略...
2gem 'jquery-rails'
3# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
4gem 'turbolinks', '~> 5'
5# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
6gem 'jbuilder', '~> 2.5'
7# Use Redis adapter to run Action Cable in production
8# gem 'redis', '~> 3.0'
9# Use ActiveModel has_secure_password
10gem 'bcrypt', '~> 3.1.7'
11gem 'bootstrap','~> 4.0.0'
12gem 'mini_racer'
13gem "kaminari"
14gem "rails-i18n"