48. Bootstrap the Form

  • We'll use Bootstrap to greatly improve the currently ugly form.
  • We'll see how the grid system works.

###app/views/contacts/new.html.erb

<div class="container">
  <div class="row">
    <h3 class="text-center">Contact Us</h3>
    <div class="col-md-4 col-md-offset-4">
      <div class="well">
        <%= form_for "/contacts" do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :email %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :comments %>
            <%= f.text_area :comments, class: 'form-control' %>
          </div>
          <%= f.submit 'Submit', class: 'btn btn-default' %>
        <% end %>
      </div>
    </div>
  </div>
</div>

###Terminal

git add .
git commit -m "Added bootstrap to form"
git push origin contact_form

Complete and Continue