12

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?

Or Smith
  • 3,556
  • 13
  • 42
  • 69
  • You can target `btn-primary` class and overwrite it in your CSS [like this](http://jsfiddle.net/ezLtkk92/). – anpsmn Dec 28 '14 at 08:01
  • It's better practice to override the effects with a custom class, rather than override the default class in this case – reZach Dec 28 '14 at 08:04

8 Answers8

26

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" />
reZach
  • 8,945
  • 12
  • 51
  • 97
  • hmmm, when I do this I just see the same blue button with a rectangle of black right around the words. – Sean Letendre Aug 09 '17 at 19:06
  • @SeanLetendre If you view the element in a browser by right-clicking, then clicking "inspect" is there another style overriding your button? – reZach Aug 14 '17 at 00:01
3

This question has already been answered here: Styling twitter bootstrap buttons

I'd recommend following the advice above; common practice is to override the default/boostrap stylesheet with your own styles rather than edit default/bootstrap directly or adding new style classes. Foundation works the same way.

Community
  • 1
  • 1
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
2

Other ways might include :

I can suggest the first one if the second seems too complicated, because there are several button types and you can customize each buttons bg colors as well as other properties. When you want to update your files or configuration you can upload your own config to get new files or to change your configuration.

And this makes the solution less complicated and more maintainable.

wooer
  • 1,677
  • 2
  • 16
  • 27
2

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" ...
Cyril Jacquart
  • 2,632
  • 3
  • 25
  • 24
0

Yes you can. Try creating a new file, name it custom.css, and add whatever you need to customize your theme. Make sure to include it after bootstrap files!

Mizmor
  • 1,391
  • 6
  • 21
  • 43
Adel
  • 5,341
  • 2
  • 21
  • 31
0

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

0

I created a custom class and overrode it with a custom class called btn-dark I then specified the name in my style.css, which means it overrode my bootstrap. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .btn-dark{
  background-color:black;
  color:white;
  }
  </style>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-dark">Basic Button</button>
</div>

</body>
</html>
Rheo
  • 165
  • 1
  • 2
  • 11
0
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
    background-color: #ee7a79 !important;
    border-color: #ee7a79;
}
Prateek Jha
  • 136
  • 2
  • 4