Rails - how to integrate a form with bootstraps css?

Viewed 50

I want to change the look of my forms using Bootstrap.

Here is my current view setup of my form(very plain...)

<div class="field">
    <%= form.label :first_name %>
    <%= form.text_field :first_name %>
  </div>

  <div class="field">
    <%= form.label :last_name %>
    <%= form.text_field :last_name %>
  </div>

  <div class="field">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>

  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div> 

I want to use for example this style (https://getbootstrap.com/docs/5.0/forms/overview/#:~:text=Copy-,%3Cform%3E,-%3Cdiv%20class%3D%22mb)

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

I'm not sure how do I integrate the ruby code with the html ?

1 Answers

Here is how I edited this form in my case . . .

<h1 class="display-6">Add a new Barber below</h1>
  <div class="mb-3">
  <div class="form-control">
    <label  class="form-label"><%= form.label :first_name %></label>
    <%= form.text_field :first_name %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :last_name %>
    <%= form.text_field :last_name %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>
  </div>
<!--Submit button below for the above form-->
  <button type="button" class="btn btn-outline-success"><%= form.submit'Create a new barber?' %> </button>

Related