I've been trying various methods and experimenting but I can't seem to figure out how to format my Rails view to display a form with Bootstrap or CSS. The issue might be related to the Bootstrap classes or the CSS.
My goal is to create a two-column layout with an image in one column positioned next to the form in the other, both of equal size.
I have attempted the standard approach: Container with a row containing two columns, one for the form and the other for the image.
However, the form seems to expand across the entire page width and the columns are displayed vertically instead of side by side.
I want it to appear like this: https://i.sstatic.net/fJmMT.jpg
<div class="container d-flex">
<div class="row">
<div class="col">
<%= form_with(model: car, local: true) do |form| %>
<%= hidden_field_tag "car[login]", exists ? "#{@car.login}" : "{@current_user.login}" %>
<div class="field">
<%= form.label :model, class: "h3" %><br>
<%= form.text_field :model, id: :car_model, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :year, class: "h3" %><br>
<%= form.number_field :year, id: :car_year, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :color, class: "h3" %><br>
<%= form.text_field :color, id: :car_color, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="field">
<%= form.label :licence_plate, class: "h3" %><br>
<%= form.text_field :licence_plate, id: :car_licence_plate, class: "form-control mb-2 mr-sm-2 mb-sm-0" %>
</div>
<div class="actions">
<%= form.button "<h3>{submit_text}</h3>".html_safe, class: "btn btn-success btn-sm" %>
</div>
<% end %>
<div class="col">
# img source here
</div>
</div>
</div>
</div>