Can I change the color of the Bootstrap button?

Question

I am using Bootstrap CSS Button Reference .

I create a button: class="btn btn-primary" .

I want its background to be black and the color of the text to be white. How can i do this?

Answer 1

You need to override your CSS so that you can change the background to black. An easy way to do this is to create a custom css class (you can put it in the <style type="text/css"> in your HTML or put it in a separate CSS file)

 .black-background {background-color:#000000;} .white {color:#ffffff;} 

Then give your button these classes

 <input type="submit" class="btn btn-primary black-background white" value="Text" /> 

Answer 2

This question has already been answered: Styling Twitter boot buttons

I would advise you to follow the advice above; It is common practice to override the default / boostrap style sheet with your own styles, rather than editing the default / bootstrap directly or adding new style classes. The fund works the same way.

Answer 3

Yes, you can, try creating a new custom.css file name to add what you need to customize your theme (please enable it after downloading the files).

Answer 4

Other methods may include:

• Use your own self-configuration settings page: http://getbootstrap.com/customize/
• Learn how to use smaller files or sass.
• Take a look at the free topics at: http://bootswatch.com/ (I was going to forget about it)

I can suggest the first if the second seems too complicated, because there are several types of buttons, and you can adjust each color of the bg buttons, as well as other properties. If you want to update your files or configuration, you can download your own configuration to get new files or change your configuration.

And this makes the solution less complicated and more convenient.

Answer 5

Use (class = "btn btn-primary navbar-inverse") in your button class. No need to write any CSS.

Answer 6

quick and easy with

  .btn-black{background-color:#000;color: #FFF;} .btn-black:hover{color: #FFF;} 

and

 <button type="button" class="btn btn-black" ...