CODEWITHSUNDEEP
csstwitter-bootstrap
Or Smith
Or Smith

Reputation: 3596

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?

Upvotes: 12

Views: 73417

Answers (8)

Prateek Jha
Prateek Jha

Reputation: 135

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
    background-color: #ee7a79 !important;
    border-color: #ee7a79;
}

Upvotes: 0

Adel
Adel

Reputation: 6258

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!

Upvotes: 0

Rheo
Rheo

Reputation: 165

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>

Upvotes: 0

Cyril Jacquart
Cyril Jacquart

Reputation: 2762

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" ...

Upvotes: 2

user8079593
user8079593

Reputation:

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

Upvotes: 0

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

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.

Upvotes: 3

wooer
wooer

Reputation: 1717

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.

Upvotes: 2

reZach
reZach

Reputation: 9429

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" />

Upvotes: 27

Related Questions