Change Bootstrap 4 button background

Question

What would be the right way to change the background of a button in bootstrap 4 to a custom color:

<button class="btn btn-primary btn-lg">Buscar</button> 

for

<button class="btn btn-primary btn-lg" style="background-color: #BLABLA">Buscar</button>

I thought about adding a background-color, the style attribute right on the button, but is this the most correct way?

Answer 1

Create a . css file with your own settings and load it after the Bootstrap . css.

Would look like this:

<!-- CSS DO BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- CSS PESSOAL -->
<link rel="stylesheet" type="text/css" href="seu_css.css">

In the archive seu_css.css you put:

.btn-primary{
   background-color: #BLABLA;
}

This will make ALL Bootstrap buttons .btn-primary stay in the background color #BLABLA. If you do not want to change the class .btn-primary globally, create a custom class:

.btn-pessoal{
   background-color: #BLABLA;
}

And add this class you created on the button:

<button class="btn btn-primary btn-lg btn-pessoal">Buscar</button> 

Answer 2

Just look at the CSS code of Bootstrap and then check what happens in each class as for example the class. btn-Primary because depending on the state (Hover,disabled and etc) of the button it may have different colors. After identifying all classes you can simply create a file with that same class or another name, just changing the colors:

.btn-personalizado {
  color: white;
  background-color: red;
  border-color: red;
}

.btn-personalizado:hover {
  color: #fff;
  background-color: orange;
  border-color: orange;
}

.btn-personalizado:focus,
.btn-personalizado.focus {
  color: #fff;
  background-color: black;
  border-color: black;
  box-shadow: 0 0 0 0.2rem rgba(49, 132, 253, 0.5);
}

.btn-personalizado:active,
.btn-personalizado.active,
.show>.btn-personalizado.dropdown-toggle {
  color: #fff;
  background-color: gray;
  border-color: gray;
}

.btn-personalizado:active:focus,
.btn-personalizado.active:focus,
.show>.btn-personalizado.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(49, 132, 253, 0.5);
}

<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- ESTILO PERSONALIZADO -->
<link rel="stylesheet" type="text/css" href="estiloPersonalizado.css">

<button class="btn btn-primary ">Buscar</button>
<button class="btn btn-personalizado ">Personalizado</button>

Answer 3

In the css file :

.btn-primary {
    background-color: #BLABLA;
}