<div class="container p-4">
  <div class="row">

    <div class="col-md-4 mx-auto">
      <div class="card text-center">
        <div class="card-header">
          <h2>!Bienvenido</h2>
        </div>
        <img src="/img/logo.png" alt="Logo login" class="card-img-top mx-auto m-2 rounded-circle w-50">
        <div class="card-body">
          <form action="/singin" method="POST">
            <div class="form-group">
              <input type="text" name="username" placeholder="Username" class="form-control" autofocus required>
              <div class="valid-feedback"></div>
              <div class="invalid-feedback">Ingrese  Username</div>    
            </div>
            <div class="form-group">
              <input type="password" name="password" placeholder="Password" class="form-control"  required> 
               <div class="valid-feedback"></div>
              <div class="invalid-feedback">Ingrese Password</div>
            </div>
              <button class="btn btn-danger btn-block">
              Ingresar
            </button>
          </form>

        </div>
      </div>
    </div>
  </div>
</div>


 <script>

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();


 </script>