devise edit form with bootstrap - ruby-on-rails

Question

In my edit view, I want to apply bootstrap. However, when replacing...
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4"><%= f.label :username %></div>
<div class="col-md-8"><%= f.text_field :username %></div>
</div>
with this...
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<input type="text" class="form-control" name="username" placeholder="Username" value="<%= f.text_field :username %>">
</div>
</div>
</div>
I get this as output
I have tried many alternatives to include erb but don't understand the issue. How should I include the field in my edit forms?

Answer 1

you can do all the things with rails.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>
For more detail Please visit this link
http://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
If you want to use add-on you can as below
<div class='input-group' >
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>

Answer 2

Try this instead
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>

Answer 3

I would suggest using a gem called simple_form, it's made by the creators of Devise and works nicely with Bootstrap. It also has nice validation errors.
https://github.com/plataformatec/simple_form
Here's an example:
= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
.form-inputs
= f.input :email, required: false, autofocus: true, placeholder: 'Email'
= f.input :password, required: false, placeholder: 'Password'
= f.input :remember_me, as: :boolean, label: 'Remember Me' if devise_mapping.rememberable?
.form-actions
= f.button :submit, 'Sign in', class: 'btn-block btn-success'
%br
= link_to 'Forgot your password?', new_user_password_path
The code above will automatically add any bootstrap classes and labels...etc