Styling Web Forms in Rails with Bootstrap Classes
In this guide we are going to spruce up our forms and make them look more professional.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this guide we are going to spruce up our forms and make them look more professional.

We'll utilize the horizontal form provided by the Bootstrap framework. Let's paste it into the _form.html.erb partial file. This is how the final code looks like:

<!-- app/views/posts/_form.html.erb -->

<%= form_for @post, class: "form-horizontal" do |f| %>

  <div class="form-group">
    <%= f.label :date, class: "col-sm-2 control-label" %> 
    <%= f.date_field :date, class: "form-control" %>  
  </div>

  <div class="form-group">
    <%= f.label :rationale, class: "col-sm-2 control-label" %>  
    <%= f.text_area :rationale, class: "form-control" %>  
  </div>

  <%= f.submit 'Save', class: 'btn btn-primary btn-block' %>

<% end %>

And this is how it looks in the browser.

large

These classes provide what we need from a styling perspective.

Resources