CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
J.G.Sable
J.G.Sable

Reputation: 1388

Changing color of bootstrap button

This is a stupid question, because I feel I should know the answer and thought my code would have done the job.

But I'm using bootstrap and I'm attempting to change the btn btn-primary class from the default blue to something else.

Here is my html:

<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
                         <span class="input-group-btn">
                             <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                         </span>

And my CSS:

.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

But it still looks like this:

enter image description here

Upvotes: 7

Views: 22861

Answers (2)

WebDragon
WebDragon

Reputation: 937

Be sure your override is loading AFTER the default bootstrap, or if you're using npm and compiling your own, be sure that your variable overrides are placed after the bootstrap defaults

in the bootstrap.css (BS4) btn-primary classes are defined as follows: (note that it is NOT necessary to preface these classes with .btn.btn-primary, just .btn-primary... The previous answer is not actually correct, but it works because of specificity. :-)

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: #0069d9;
  background-image: none;
  border-color: #0062cc;
}

If you fill all these out in your theme, just be sure your theme alterations load after bootstrap does.

Upvotes: 4

Rafael Thomazetti
Rafael Thomazetti

Reputation: 41

Since btnshares its class with the same element named btn-primary, your CSS selectors should look like

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

Upvotes: 4

Related Questions