How do I style a twitter bootstrap button with a hexadecimal color in Rails 4.2.4

Question

I am a junior developer building my first web application for a client.

The owner is not content with the standard colours of the bootstrap buttons on the home.html.erb and wants a flamboyant colour of pink on one button particularly.

How do I style a twitter bootstrap button with hexadecimal colour using rails 4.2.4

What would the syntax be and what CSS folder from my below list would I use for such:

bootstrap_and_customization.css.scss,
home.css.scss,
pages.scss

Possible duplicate of [Can I change Bootstrap button color?](http://stackoverflow.com/questions/27674614/can-i-change-bootstrap-button-color) — vanburen, Jan 21 '16 at 16:20

score 1 · Accepted Answer · answered Jan 21 '16 at 16:22

1

You can just add it to the application.css|css.scss

So if you added a class of btn btn-pink to the button. I recommend that you add btn class so you will inherit the basic styling.

.btn-pink{
  color: #FFFFFF; // whatever you want
  background-color: ##FF69B4; // whatever you want
}

answered Jan 21 '16 at 16:22

mtkcs

1,696
14
27

so I understand you properly: right now in the home.html.erb i have.. class: "btn btn-primary btn-lg" Do I change this syntax in the embedded ruby to .btn-pink and also use this in the styles – Chris Dormani Jan 21 '16 at 16:37
Your code will become `... class: "btn btn-pink btn-lg" ...` and don't forget to add the styling the `application.css` – mtkcs Jan 21 '16 at 16:39
Really appreciate that. just one final query. Why the application.css file for styles deployment? as opposed to the bootstrap_and_cutomization.css.scss (or the page specific home.css.scss – Chris Dormani Jan 21 '16 at 16:47
You can put your custom `css` wherever you want as long as it's loaded in the `application.css` using `require` or `require_tree`. – mtkcs Jan 21 '16 at 16:51

How do I style a twitter bootstrap button with a hexadecimal color in Rails 4.2.4

1 Answers1