Transforming the hue of a Bootstrap button

Question

Transforming the hue of a Bootstrap button

I'm feeling a bit frustrated because I expected my code to work and shouldn't have to ask this question.

Currently, I am working with bootstrap and trying to customize the default blue color of the btn btn-primary class to something different.

My HTML snippet looks like this:

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

This is the CSS that I wrote:

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

Despite my efforts, the button still appears as it did before:

https://i.sstatic.net/b0h4R.jpg

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

When the class btn is shared with another element named btn-primary, your CSS selectors should be adjusted as follows:

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

Answer 2

When the class btn is shared with another element named btn-primary, your CSS selectors should be adjusted as follows:

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

Answer 3

Answer №2

Make sure that your custom override is loading AFTER the default bootstrap, or if you are using npm and compiling your own version, ensure that your variable overrides come after the bootstrap defaults

In the bootstrap.css (BS4), the btn-primary classes are defined as follows: (Please note that it is NOT required to prefix these classes with .btn.btn-primary, just .btn-primary... The previous answer may not be entirely accurate, but it works due to 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 are making modifications in your theme, just ensure that your theme changes load after the bootstrap styles do.

Answer 4

Make sure that your custom override is loading AFTER the default bootstrap, or if you are using npm and compiling your own version, ensure that your variable overrides come after the bootstrap defaults

In the bootstrap.css (BS4), the btn-primary classes are defined as follows: (Please note that it is NOT required to prefix these classes with .btn.btn-primary, just .btn-primary... The previous answer may not be entirely accurate, but it works due to 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 are making modifications in your theme, just ensure that your theme changes load after the bootstrap styles do.

Transforming the hue of a Bootstrap button

Answer №1

Answer №2

Similar questions

Influence of scoped styles on external webpages

Guide to utilizing the scrollspy feature in Bootstrap 4

My stored variable in the php session is not being recalled properly

Determine the number of elements chosen within a complex JSON structure

What could be causing my content to unexpectedly break out of its designated div structure?

Adding an asterisk to mark a required field in Angular reactive form inputs is a simple task that can be accomplished with just a

Steps for designing a fully responsive box-grid featuring 12 identical images with perfectly centered text

I will receive a 404 error if I try to access a URL without including the hashtag symbol

Creating a Bootstrap layout with a cool typing effect to position my P element in the center of a div

Use JavaScript to create a new window and load the HTML content from an external URL

The program encountered an error while trying to access the undefined property '_header'

What steps should I take to customize prettier for Vue.js template syntax?

Aligning the navigation bar items in Bootstrap 4 (version alpha 5)

Why is my AngularJS application triggering two events with a single click?

Tips for Choosing Two Classes Using CSS

Cordova - Fixed elements flicker/blink when scrolling

Issue with flex-grow property not functioning as expected in Internet Explorer 11

Using CSS3 to style a span element as a circular shape with one half displaying a distinct background color

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

Create HTML code automatically from JSON data