bootstrapのjustify-content-centerが効かない

Question

前提・実現したいこと

ruby on rails 6 で Bootstrap5 を使ってwebアプリを作っています。
新規登録フォームを作成していて、全体を中央に寄せたいので調べたところ、justify-content-center クラスを用いれば良さそうだったのでそれを用いたのですが、次のように左に寄ってしまいます。

次のものがerbコードです。

<div class="p-5 rounded">
  <h1>アカウント作成</h1>
</div>

<div class="container">
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= bootstrap_devise_error_messages! %>
    <div class="row col-5 justify-content-center align-content-center">
      <%= f.label :email ,class: "col-sm-6 col-form-label text-end"%>
      <div class="form-group col-sm-6">
        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
      </div>

      <%= f.label :username, class:"col-sm-6 col-form-label text-end" %><br/>
      <div class="form-group col-sm-6">
        <%= f.text_field :username, class: "form-control" %>
        <small class="form-text text-muted">未入力の場合匿名になります</small>
      </div>

      <%= f.label :year, class:"col-sm-6 col-form-label text-end" %><br/>
      <div class="form-group col-sm-6">
        <%= f.select :year, [2018, 2019, 2020, 2021], {},  class: "form-control" %>
      </div>

      <%= f.label :password, class:"col-sm-6 col-form-label text-end" %><br/>
      <div class="form-group col-sm-6">
        <%= f.password_field :password, autocomplete: 'current-password',
                                    class: 'form-control',
                                    required: true,
                                    minlength: @minimum_password_length,
                                    maxlength: '30' %>
        <% if @minimum_password_length %>
          <small class="form-text text-muted"><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></small>
        <% end %>
      </div>

      <%= f.label :password_confirmation, class:"col-sm-6 col-form-label text-end" %><br/>
      <div class="form-group col-sm-6">
        <%= f.password_field :password_confirmation, autocomplete: 'current-password', class: "form-control" %>
      </div>

      <div class="form-group d-grid gap-2 text-end">
        <p> 
          <%= f.submit t('.sign_up'), class: 'btn btn-primary my-2' %>
        </p>
      </div>
    </div>
  <% end %>
  <div class="row col-5 justify-content-center align-content-center">
    <%= render 'devise/shared/links' %>
  </div>
</div>

atcoderの登録ページをイメージしています。
https://atcoder.jp/register

どこを直せば良くなるか教えていただきたいです。
よろしくお願いします。

Answer 1

    <div class="row col-5 justify-content-center align-content-center">
      <%= f.label :email ,class: "col-sm-6 col-form-label text-end"%>
      <div class="form-group col-sm-6">

これだと、6+6=12でグリッド使いきってないですか？
余白がなければ左寄せでもセンタリングでも変わらないような？

Answer 2

こちらなど参考にしてみてはいかがですか？
https://getbootstrap.jp/docs/5.0/layout/columns/#水平方向に整列

rowとcolは色々見ていると、
基本的に別タグでやることが多いです。

もしくは、offsetでやるのもありかもしれません。
https://getbootstrap.jp/docs/5.0/layout/columns/#水平方向に整列

Comments

[tam1006]

このドキュメントを参考にして色々と試行錯誤したのですが上手くいきませんでした。
もしよろしければ具体的にどのように書けばいいか教えてもらえませんか？

Answer 3

rowのdivタグでcol-5と設定してるからではないでしょうか？

<%= bootstrap_devise_error_messages! %>
    <div class="row col-5 justify-content-center align-content-center">

Comments

[tam1006]

colを設定しないと、横幅いっぱいにフォームが作られてしまうので、これを避けるためにcolを設定しています。

[tani__san929]

すいません。別回答で回答してしまいました。色々書き方もあるのでどれかでお役に立てば幸いです。