Jump to content

The ultimate community for Ruby on Rails developers.


Photo

How to properly style Devise forms with Bootstrap 3

rubymine rubyonrails devise bootstrap3

  • Please log in to reply
3 replies to this topic

#1 Railz4Ruby2022

Railz4Ruby2022

    Dispatcher

  • Members
  • 36 posts

Posted 28 August 2014 - 12:57 AM

When I built and installed the devise model/views. I didn't include the --bootstrap argument at the end out of fear of overriding the bootstrap inside of my css folder. Can you explain to me how I can apply the bootstrap for views that require users to be logged in.

 

<h2>Change your password</h2>

<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
  <%= f.error_notification %>

  <%= f.input :reset_password_token, as: :hidden %>
  <%= f.full_error :reset_password_token %>

  <div class="form-inputs col-md-5">
    <%= f.input :password, label: "New password", required: true, autofocus: true, wrapper_html: {class: 'control-label'} %>
    <%= f.input :password_confirmation, label: "Confirm your new password", required: true, wrapper_html: {class: 'form-control'} %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, "Change my password", wrapper_html: {class: 'btn btn-primary'} %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
 

Note: I can't tell what effect these changes are having since I didn't login to the user account. I need a faster way to style and position the form in the middle of the page.



#2 iamankits

iamankits

    Passenger

  • Members
  • 4 posts

Posted 14 September 2014 - 12:28 PM   Best Answer

Here is how I have done it.

Hope it helps.
 

<div class="container log-in">
<div class="panel panel-default">
<div class="panel-heading">
<h2>Change your password</h2>
</div>
<div class="panel-body">
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
 <%= devise_error_messages! %>
 <%= f.hidden_field :reset_password_token %>
 
 <div class="form-group">
  <%= f.label :password, "New password" %>
   <%= f.password_field :password, autofocus: true, autocomplete: "off", class: "form-control" %>
 </div>
 
 <div class="form-group">
  <%= f.label :password_confirmation, "Confirm new password" %>
   <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
 </div>
 
 <div class="form-group">
  <%= f.submit "Change my password", class: "btn btn-default btn-lg standard-button2" %>
 </div>
<% end %>
 
<%= render "devise/shared/links" %>
</div>
</div>
</div>


#3 iamankits

iamankits

    Passenger

  • Members
  • 4 posts

Posted 14 September 2014 - 12:48 PM

I did forget to give you the CSS. Here it is ...!!!!
 

.log-in{
  width: 700px;
  margin:auto;
  text-align:center;
  padding-top:10%;
  font-family: 'Roboto', Arial, sans-serif;
}
 
.panel-heading{
  background-color:#fff;
}
 
.form-control{
  width: 500px;
  text-align: center;
  margin:auto;
}
 
.panel-body p{
  color:#555;
}


#4 Railz4Ruby2022

Railz4Ruby2022

    Dispatcher

  • Members
  • 36 posts

Posted 14 September 2014 - 10:22 PM

 

I did forget to give you the CSS. Here it is ...!!!!
 

.log-in{
  width: 700px;
  margin:auto;
  text-align:center;
  padding-top:10%;
  font-family: 'Roboto', Arial, sans-serif;
}
 
.panel-heading{
  background-color:#fff;
}
 
.form-control{
  width: 500px;
  text-align: center;
  margin:auto;
}
 
.panel-body p{
  color:#555;
}

 

Thank you for helping me out.







Also tagged with one or more of these keywords: rubymine, rubyonrails, devise, bootstrap3

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users