# Adding bootstrap styling to ruby on rails form\_for

**URL:** <https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062>\
**Category:** rubyonrails-talk\
**Created:** [September 1, 2015, 3:41pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062 "2015-09-01T15:41:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 3:41pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/1 "2015-09-01T15:41:32Z")

</div>

I am trying to add bootstrap styling to my rails form\_for form. Such that I can change the button styling and make the from inline. I tried adding doing something like:

&nbsp;&nbsp;\<div class="form-group"\> &nbsp;&nbsp;\<%= f.submit "Create your account", class: "btn btn-primary" %\> &nbsp;&nbsp;\</div\>

However, it did not work. Here is my code in my file.

\<%= form\_for @subscription do |f| %\> \<%= f.text\_field :email %\> \<%= f.submit %\> \<% end %\>

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 3:50pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/2 "2015-09-01T15:50:36Z")

</div>

You need to add the classifications within the erb code.

For instance

\<%= f.submit, class: “btn btn-primary” %\>

(PS it seems like you might be customizing the create button so you have to list that in the ERB code for it to show up properly)

---

<div class="post-metadata">

**Author:** ![walterdavis](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/walterdavis/32/705_2.png) [@walterdavis](https://discuss.rubyonrails.org/u/walterdavis)\
**Post date:** [September 1, 2015, 3:53pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/3 "2015-09-01T15:53:17Z")

</div>

> I am trying to add bootstrap styling to my rails form\_for form. Such that I can change the button styling and make the from inline. I tried adding doing something like:
> 
> \<div class="form-group"\> \<%= f.submit "Create your account", class: "btn btn-primary" %\> \</div\>
> 
> However, it did not work. Here is my code in my file.
> 
> \<%= form\_for @subscription do |f| %\> \<%= f.text\_field :email %\> \<%= f.submit %\> \<% end %\>

When you view that in a browser, what do you see?

Bootstrap 3 doesn’t require a classname on the form element itself any more, unless you want to do an inline form, in which case you need to add class=“form-inline” to it. To do that in a standard Rails form\_for helper, set that in the html: attributes:

\<%= form\_for :foo, html: { class: ‘form-inline’ } %\>

The rest (form-group and similar) can be done easily with regular HTML inside the form partial, and you can add a classname to a form element like this:

\<%= f.text\_field :bar, class: ‘form-control’ %\>

Walter

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 4:18pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/4 "2015-09-01T16:18:05Z")

</div>

Walter Davis wrote in post #1178402:

> > However, it did not work. Here is my code in my file.
> > 
> > \<%= form\_for @subscription do |f| %\> \<%= f.text\_field :email %\> \<%= f.submit %\> \<% end %\>
> 
> When you view that in a browser, what do you see?
> 
> Bootstrap 3 doesn’t require a classname on the form element itself any more, unless you want to do an inline form, in which case you need to add class=“form-inline” to it. To do that in a standard Rails form\_for helper, set that in the html: attributes:
> 
> \<%= form\_for :foo, html: { class: ‘form-inline’ } %\>
> 
> The rest (form-group and similar) can be done easily with regular HTML inside the form partial, and you can add a classname to a form element like this:
> 
> \<%= f.text\_field :bar, class: ‘form-control’ %\>
> 
> Walter

Thanks Walter.

I tried this below it change the submit button text. However, the styling of the button is not be applied. Am I leaving something wrong or leaving somtehing off.

&nbsp;&nbsp;\<%= form\_for @subscription do |f| %\> &nbsp;&nbsp;\<%= f.text\_field :email %\> &nbsp;&nbsp;\<div class="form-group"\> &nbsp;&nbsp;\<%= f.submit "Update", class: "btn btn-primary" %\> &nbsp;&nbsp;\</div\> \<% end %\>

Example - I tested.. The tried this code below as a test and it works. But, it does not contain the ruby code. \<form class="form-inline"\> &nbsp;&nbsp;\<div class="form-group"\> &nbsp;&nbsp;&nbsp;&nbsp;\<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address"\> &nbsp;&nbsp;&nbsp;&nbsp;\<button type="submit" class="btn btn-primary"\>Submit\</button\> &nbsp;&nbsp;\</div\> &nbsp;&nbsp;\</form\>

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 4:18pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/5 "2015-09-01T16:18:31Z")

</div>

John Lahr wrote in post #1178401:

> You need to add the classifications within the erb code.
> 
> For instance
> 
> \<%= f.submit, class: "btn btn-primary" %\>
> 
> (PS it seems like you might be customizing the create button so you have to list that in the ERB code for it to show up properly)
> 
> On Tuesday, September 1, 2015 at 8:43:34 AM UTC-7, Ruby-Forum.com User

I tried this below it change the submit button text. However, the styling of the button is not be applied. Am I leaving something wrong or leaving somtehing off.

&nbsp;&nbsp;\<%= form\_for @subscription do |f| %\> &nbsp;&nbsp;\<%= f.text\_field :email %\> &nbsp;&nbsp;\<div class="form-group"\> &nbsp;&nbsp;\<%= f.submit "Update", class: "btn btn-primary" %\> &nbsp;&nbsp;\</div\> \<% end %\>

Example - I tested.. The tried this code below as a test and it works. But, it does not contain the ruby code.

\<form class="form-inline"\> &nbsp;&nbsp;\<div class="form-group"\> &nbsp;&nbsp;&nbsp;&nbsp;\<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address"\> &nbsp;&nbsp;&nbsp;&nbsp;\<button type="submit" class="btn btn-primary"\>Submit\</button\> &nbsp;&nbsp;\</div\> &nbsp;&nbsp;\</form\>

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 4:21pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/6 "2015-09-01T16:21:13Z")

</div>

How have you integrated bootstrap into your application?

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 4:27pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/7 "2015-09-01T16:27:39Z")

</div>

John Lahr wrote in post #1178409:

> How have you integrated bootstrap into your application?

gem 'bootstrap-sass', '~\> 3.3.5'

In my custom stylesheet.css.scss @import "bootstrap-sprockets"; @import "bootstrap";

Bootstrap is working all through my site, except with this form problem.

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 5:10pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/8 "2015-09-01T17:10:37Z")

</div>

If you are cutting and pasting exactly from your view to your HTML it seems kind of odd.

The ‘form group’ is showing up not where you put it before the form, but before the input field.

The Submit button still says submit, not update as you indicate in your view.

Also - your missing the f.label for your form?

The form control div is not something i ever used - i’d stick with the basics and see if that works.

\<%= form\_for(@subscription) do |f| %\>

\<%= f.label :name %\>

\<%= f.text\_field :name %\>

\<%= f.submit “Update”, class: “btn btn-primary” %\>

\<% end %\>

Do you have any other bootstrap code on this view form and is it displaying properly?

To make sure you get it everywhere you want, I’d put your bootstrap imports in the application.scss file (In current rails versions you don’t need css.scss, just scss)

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 5:28pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/9 "2015-09-01T17:28:59Z")

</div>

John Lahr wrote in post #1178417:

> If you are cutting and pasting exactly from your view to your HTML it seems kind of odd.
> 
> The 'form group' is showing up not where you put it before the form, but before the input field. The Submit button still says submit, not update as you indicate in your view.
> 
> Also - your missing the f.label for your form?
> 
> The form control div is not something i ever used - i'd stick with the basics and see if that works.
> 
> \<%= form\_for(@subscription) do |f| %\> \<%= f.label :name %\> \<%= f.text\_field :name %\> \<%= f.submit "Update", class: "btn btn-primary" %\> \<% end %\>
> 
> Do you have any other bootstrap code on this view form and is it displaying properly?
> 
> To make sure you get it everywhere you want, I'd put your bootstrap imports in the application.scss file (In current rails versions you don't need css.scss, just scss)

Thanks, it work the following code.

I had to replace &nbsp;&nbsp;\<%= f.submit :sample, class:"btn btn-primary" %\>

with this code. the difference was submit vs button. \<%= f. button :sample, class:"btn btn-primary" %\>

&nbsp;&nbsp;\<%= form\_for @subscription do |f| %\> &nbsp;&nbsp;\<%= f.text\_field :email %\> &nbsp;&nbsp;\<%= f.button :sample, class:"btn btn-primary" %\>

\<% end %\>

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 5:44pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/10 "2015-09-01T17:44:43Z")

</div>

I’m glad you were able to get it to work - but does the button work to submit your form?

In my usage, btn btn-primary work on most elements. Not sure why changing the tag makes it work and now am concerned that your form won’t submit based on the above code?

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 6:28pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/11 "2015-09-01T18:28:22Z")

</div>

John Lahr wrote in post #1178421:

> I'm glad you were able to get it to work - but does the button work to submit your form? In my usage, btn btn-primary work on most elements. Not sure why changing the tag makes it work and now am concerned that your form won't submit based on the above code?

Your correct. It fixed the button issued. After checking rails console the emal are coming in as empty strings on submit. This is stressing.

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 6:32pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/12 "2015-09-01T18:32:22Z")

</div>

One issue I had when I was trying to get bootstrap fully to work was that I hadn’t included it in my application.js file (i know for sure i needed it for drop downs, I don’t know what else you might need it for). So if you haven’t done that I’d look at the code.

Honestly though \<%= f.submit, class: ‘btn btn-primary’ %\> always works for me (have you tried it purely the basic way with out :sample that you showed earlier?)

I’d make sure that the bootstrap is in your application.css.scss (or application.scss file if you wish) so that it does cascade to all pages.

---

<div class="post-metadata">

**Author:** ![walterdavis](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/walterdavis/32/705_2.png) [@walterdavis](https://discuss.rubyonrails.org/u/walterdavis)\
**Post date:** [September 1, 2015, 7:03pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/13 "2015-09-01T19:03:57Z")

</div>

> One issue I had when I was trying to get bootstrap fully to work was that I hadn't included it in my application.js file (i know for sure i needed it for drop downs, I don't know what else you might need it for). So if you haven't done that I'd look at the code.
> 
> Honestly though \<%= f.submit, class: 'btn btn-primary' %\> always works for me (have you tried it purely the basic way with out :sample that you showed earlier?) I'd make sure that the bootstrap is in your application.css.scss (or application.scss file if you wish) so that it does cascade to all pages.

I have nothing to add here, this has always “Just Work™”ed for me.

&nbsp;&nbsp;\<div class="actions form-group"\> &nbsp;&nbsp;&nbsp;&nbsp;\<%= f.submit class: 'btn btn-success' %\> &nbsp;&nbsp;\</div\>

...is copied and pasted out of an erb form I’m working on right now.

Walter

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 7:16pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/14 "2015-09-01T19:16:28Z")

</div>

You’re right it shouldn’t matter but when things aren’t working like they should be without any obvious explanation you try everything.

And BTW

```
<%= f.submit class: 'btn btn-success' %>

```

That shouldn’t work either if you copied and pasted right from your code because there’s a comma missing between submit and class

(I did test f.submit, class ‘btn btn-primary’ just now on my lunch break and it worked for me as I expected, so there’s something else in the original posters code causing the issue)

---

<div class="post-metadata">

**Author:** ![walterdavis](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/walterdavis/32/705_2.png) [@walterdavis](https://discuss.rubyonrails.org/u/walterdavis)\
**Post date:** [September 1, 2015, 7:42pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/15 "2015-09-01T19:42:08Z")

</div>

> You're right it shouldn't matter but when things aren't working like they should be without any obvious explanation you try everything.
> 
> And BTW
> 
> \<div class="actions form-group"\> &nbsp;&nbsp;&nbsp;&nbsp;\<%= f.submit class: 'btn btn-success' %\> &nbsp;&nbsp;\</div\>
> 
> That shouldn't work either if you copied and pasted right from your code because there's a comma missing between submit and class

No, there should never be a comma before the first argument, only after it. I’ll write it out with parentheses so you can see the reason why.

\<%= f.submit( class: ‘btn btn-success’ ) %\>

Walter

---

<div class="post-metadata">

**Author:** ![Colin\_Law](https://avatars.discourse-cdn.com/v4/letter/c/b9e5f3/32.png) [@Colin\_Law](https://discuss.rubyonrails.org/u/Colin_Law)\
**Post date:** [September 1, 2015, 7:49pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/16 "2015-09-01T19:49:52Z")

</div>

One thing to try when odd things are happening is to validate the html. View the source in the browser, copy the whole text, and paste it into the validator at [The W3C Markup Validation Service](https://validator.w3.org/#validate_by_input). If the html is not valid the browser silently guesses what you mean and it often guesses incorrectly.

Colin

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 8:15pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/17 "2015-09-01T20:15:54Z")

</div>

Here is the code entirely:

class SubscriptionsController\<ApplicationController &nbsp;&nbsp;def create &nbsp;&nbsp;&nbsp;@subscription = Subscription.new(subscription\_params) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p params["subscription"]["email"] &nbsp;&nbsp;&nbsp;&nbsp;@subscription.save &nbsp;&nbsp;&nbsp;&nbsp;redirect\_to root\_path &nbsp;&nbsp;end

private

&nbsp;&nbsp;def subscription\_params &nbsp;&nbsp;&nbsp;params.require(:subscription).permit(:email) &nbsp;&nbsp;end end

Views \<%= form\_for @subscription do |f| %\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= f.text\_field :email %\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= f.submit "Create", class: 'btn btn-success' %\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<% end %\>

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 8:19pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/18 "2015-09-01T20:19:55Z")

</div>

This is more of a display/view problem - the issue is more likely going to be in your stylesheet, appplication.html.erb or this specific view erb file

---

<div class="post-metadata">

**Author:** ![John\_Lahr](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@John\_Lahr](https://discuss.rubyonrails.org/u/John_Lahr)\
**Post date:** [September 1, 2015, 8:20pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/19 "2015-09-01T20:20:13Z")

</div>

PS - does the form work even if the styling doesn’t? Can you submit emails?

---

<div class="post-metadata">

**Author:** ![11155](https://avatars.discourse-cdn.com/v4/letter/1/d26b3c/32.png) [@11155](https://discuss.rubyonrails.org/u/11155)\
**Post date:** [September 1, 2015, 8:23pm UTC](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062/20 "2015-09-01T20:23:24Z")

</div>

John Lahr wrote in post #1178443:

> PS - does the form work even if the styling doesn't? Can you submit emails?

Yes. The form works completely. The styling is the problem in this form only. The same buttons are working in other places with no problem.

[Next page](https://discuss.rubyonrails.org/t/adding-bootstrap-styling-to-ruby-on-rails-form-for/71062.md?page=2)