Bootstrap CSS btn-block Class not Working with Rails for Submit Button

Question

I am using the bootstrap-sass gem to style my Rails app and having an issue getting the btn-block class to work with a submit button in new user registration form.

Below is the relevant code...

   <%= link_to "Sign in with Facebook", user_omniauth_authorize_path(:facebook), class: "btn btn-primary btn-large btn-block" %> 

   <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

<%= f.email_field :email, placeholder: "Email" %>

    <% if f.object.password_required? %>

<%= f.password_field :password, placeholder: "Password" %>

<%= f.password_field :password_confirmation, placeholder: "Confirm Password" %>

<% end %>

<%= f.submit "Create Account", class: "btn btn-primary" %>

<% end %>

This code creates a valid submit button using bootstrap. However, when I try and add the btn-block class to the submit button it messes with the button styling and does not give the button a width:100% style like the above link that is styled with the same class.

Adam Jonas Adam Jonas · Accepted Answer · 2012-09-24T15:24:41

Create a new stylesheet in app/assets/stylesheets called style.css

Make sure that you explicitly require this stylesheet in your application.css using the syntax *= require_self

So in the new stylesheet app/assets/stylesheets/style.css

.btn.btn-primary {
  width: 100%; 
}

If this doesn't work you need to make your selector even more specific by adding an ID to the form.

Bootstrap CSS btn-block Class not Working with Rails for Submit Button

1 Answers