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.

styliii · Accepted Answer · 2012-09-26 16:05:39Z

5

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.

edited Sep 26, 2012 at 16:05

styliii

6466 silver badges13 bronze badges

answered Sep 24, 2012 at 15:24

Adam Jonas

1841 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related