Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I change Bootstrap button color?

I use Bootstrap CSS Buttons Reference.

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

I want that it background will be black, and the text color will be white. How can I do it?

like image 902
Or Smith Avatar asked Dec 28 '14 07:12

Or Smith


People also ask

Can you change the color of a Bootstrap button?

In Bootstrap, you can control the size as well as the color of your buttons. To change the size of your buttons, you can add the following modifier classes in your HTML: . btn-lg.

How do you change the color of a button box?

Type background-color: in the quotation marks after "style=". This element is used to change the background color of the button. Type a color name or hexadecimal code after "background-color:". You can type name of a color (i.e, blue) or a hexadecimal color.


2 Answers

easy and quick way with

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

and

<button type="button" class="btn btn-black" ...
like image 89
Cyril Jacquart Avatar answered Sep 17 '22 17:09

Cyril Jacquart


You need to override your css so you can change the background to black. A simple way to do this is to create a custom css class (you can either put this in a <style type="text/css"> tag in your HTML or put this 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" />
like image 34
reZach Avatar answered Sep 19 '22 17:09

reZach