<title>Bootstrap 4 Form Server Side Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<label for="email">Email</label>
<input type="email" class="form-control is-valid" value="john@example.com" required>
<div class="valid-feedback">
<label for="address1">Address</label>
<input type="text" class="form-control is-invalid" placeholder="Enter address 1">
<div class="invalid-feedback">
Please provide a valid address.
<div class="form-group col-sm-4">
<label for="city">City</label>
<input type="text" class="form-control is-invalid" placeholder="Your city">
<div class="invalid-feedback">
Please provide a valid city.
<div class="form-group col-sm-4">
<label for="state">State</label>
<input type="text" class="form-control is-invalid" placeholder="Your State">
<div class="invalid-feedback">
Please provide a valid state.
<div class="form-group col-sm-4">
<label for="pincode">Pincode</label>
<input type="text" class="form-control is-invalid" placeholder="Your Pincode">
<div class="invalid-feedback">
Please provide a valid pincode.
<input type="checkbox" class="form-check-input is-invalid">
<label class="form-check-label">Remember me</label>
<div class="invalid-feedback">
Please provide a valid pincode.
<button type="submit" class="btn btn-primary">Submit</button>