'bootstrap 5 on rails 6 (justify-content-center)

I am a newbie here, please avoid complex answers :)

A row was created to center all of its content, it worked just fine. The form submit button and the link_to "Cancel and return to articles listing" are not being centered, even though it is within the row. I even wiped my application.scss stylesheet incase something was conflicting.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-10">
            <%= form_with(model: @article, local: true) do |f| %>
                <div class="form-group row">
                    <%= f.label :title, class: "col-2 col-form-label" %>
                    <div class="col-10">
                        <%= f.text_field :title, class: "form-control" %>
                    </div>
                </div>

                <div class="form-group row">
                    <%= f.label :description, class: "col-2 col-form-label" %></br>
                    <div class="col-10">
                        <%= f.text_area :description, rows: 10, class: "form-control" %>
                    </div>
                </div>

                <div class="form-group row">
                    <%= f.submit class: "btn btn-outline-light btn-lg w-25 mt-4" %>
                </div>
            <% end %>
        </div>
        <%= link_to "Cancel and return to articles listing", articles_path %>
    </div>
</div>

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source