Placeholder Color Change in Bootstrap

Question

How can I change the Placeholder Color in Bootstrap?

The following code, which I tried, doesn't work.

input::-webkit-input-placeholder {
        color: red;
}

input:-moz-placeholder {
        color: red;
}

Answer 1

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: red;
            opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: red;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
            color: red;
 }

The following is the reference link. https://www.w3schools.com/howto/howto_css_placeholder.asp

Answer 2

For Bootstrap 4, if you're using SCSS, just override variable $input-placeholder-color before you import bootstrap.

// variable overrides
$input-placeholder-color: red;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Answer 3

In Bootstrap 4 you change it like this:

.form-control::-webkit-input-placeholder {
  color: red;
}

Answer 4

It's work for me in bootstrap 5.3

input::placeholder {
    color: white !important;
}
input[type="text"]{
    padding-inline: 45px;
}

Answer 5

Try the !important keyword

.input::placeholder {
     color: red !important;
     opacity: 1;
}