左寄せになっているのを治す方法
Bootstrap導入直後の、
app>views>layouts>application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>MyCloset</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
この時 bodyに直接書き込まれているのが左寄せになる原因です。
(左寄せしたい人は直接記入が良いみたいです)
yieldをdivタグで囲み、Bootstrapがコンテンツを管理するcontainerに入れます。
<!DOCTYPE html>
<html>
<head>
<title>MyCloset</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
これで左寄せ問題は解決です🎵