Bootstrap 4 comes with some powerful yet easy to use validation styles for input fields. Validation styles are used to show things such as errors, warnings, and success states for form fields when you submit the actual form. Let's take a look at the code to render all three validation states:

<div class="form-group has-success"> 
  <label class="form-control-label">Input with success</label> 
  <input type="text" class="form-control form-control-success"> 
</div> 
<div class="form-group has-warning"> 
  <label class="form-control-label">Input with warning</label> 
  <input type="text" class="form-control form-control-warning"> 
</div> 
<div class="form-group has-danger"> 
  <label class="form-control-label">Input with danger</label> 
  <input type="text" class="form-control form-control-danger"> 
</div> 

The markup for each validation variation is very similar to a regular input with the addition of a few CSS classes to apply the proper state look and feel. Let's go over each change you need to be aware of:

Let's take a look at how all these validation inputs should look in the browser:

As you can see, the inputs and labels are colored to match their state. You'll also notice each input has an icon to the right edge of it. These icons are automatically added when you include the required CSS files. There is no need to actually use any images here, which is great. That concludes everything that you need to know about forms in Bootstrap 4. In the next section, I'll teach you about the Jumbotron component.