rubyでbootstrapを使って投稿の一覧を表示させたいです。

前提・実現したいこと

投稿の一覧をbootstrapを使い、一覧として表示させたいです。
表示は、一投稿づつ縦並びで、画像をタイトルとテキストの間に表示させたいです。
ruby、bootstrapを学び始めて間もないですが、よろしくお願い致します。

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

bootstrapを導入後、投稿したものが、表示されなくなってしまいました。
フッター、ヘッダーは表示されているので、導入はできているかと思われます。

該当のソースコード

ruby
1post.index.erb
2
3
4<div class="row">
5  <% @posts.each do |post| %>
6    <div class="col-12">
7      <div class="card">
8        <div class="card-body">
9          <h4 class="card-title">
10            <%= link_to post.campsite, "#", method: :get %>
11          </h4>
12        </div>
13        <%= link_to post_path(post.id), method: :get do %>
14          <%= image_tag post.image, class: "img-fluid" %>
15        <% end %>
16        <div class="card-body">
17          <p class="card-subtitle">
18            <%= link_to post.user.nickname, "/users/#{post.user_id}", method: :get %>
19          </p>
20          <div id="favo_buttons_<%= post.id %>" class="btn btn-primary">
21            <%= render partial: 'favorites/favorite', locals: { post: post} %>
22          </div>
23          <p class="card-text">
24            <%= post.text %>
25          </p>
26        </div>
27      </div>
28    </div>
29  <% end%>
30</div>

ruby
1aplication.html.erb
2
3
4<!DOCTYPE html>
5<html>
6  <head>
7    <meta charset="utf-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10    <title>WeCamp</title>
11    <%= csrf_meta_tags %>
12    <%= csp_meta_tag %>
13    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
14    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
15    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
16    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
17  </head>
18
19  <body>
20    <%= yield %>
21    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
22    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
23    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
24  </body>
25</html>