Border color for input in Bootstrap

Question

I want to achieve such an effect as here https://zapodaj.net/c0e251a5b8ff2.png.html My current code looks like this https://codepen.io/anon/pen/RQWvwJ So I'm trying for input

<div class="form-group has-warning" id="form-username">
   <label class="control-label" for="username">Your username</label>
   <input name="username" id="username" type="text" maxlength="36" class="form-control" />
</div>

add a class has-warning to change the color, but it does not. I'm using Bootstrap 4.0.0.

How do you set a border for the input field?

Answer 1

You also need to add form-control-warning to the input:

<div class="form-group has-warning" id="form-username">
   <label class="control-label" for="username">Your username</label>
   <input name="username" id="username" type="text" maxlength="36" class="form-control form-control-warning" />
</div>

Any element with form-control-warning inside has-warning (i.e., .has-warning .form-control-warning is what gets the border.

---

After taking a closer look, it actually looks like they changed the form validation stuff pretty drastically between 4.0-alpha6 (which is the documentation that references has-warning and 4.0 (which is the one in your CodePen). The new documentation can be found here: Bootstrap 4 Form Validation.

It looks like they got rid of the "warning" state entirely. It's now either valid or invalid. You have to then either use was-validated on a parent element, which then uses the pseudo-elements :valid and :invalid (based on HTML5 required and other things), or leave off was-validated and just add is-invalid directly to the input to get a red border. There is no yellow.

<div class="form-group" id="form-username">
  <label class="control-label" for="username">Your username</label>
  <input name="username" id="username" type="text" maxlength="36" class="form-control is-invalid" />
</div>

CodePen

If you want to just color the border, I'd recommend you just apply the CSS. If you want to actually do the valid/invalid thing, I'd recommend going with the approach I just mentioned above. You could override the color to be that yellow-ish with this if you wanted:

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    border-color: #f0ad4e;
}

CodePen

Finally, though I don't recommend it, you could also just use the Bootstrap 4 Alpha version: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css. Though, I would avoid this since you're locking yourself to an already outdated version with newer code.

Answer 2

Simply You can change the border color by adding and removing the border-danger class dynamically using javascript.

const element = document.getElementById('username')
element.classList.add('border-danger');

To simply remove the border.

if(element.classList.contains('border-danger') {
  element.classList.remove('border-danger')
}