<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body class="bg-dark">
<header class="bg-dark" style="height: 60px; padding: 5px;">
<h3 class="text-light" style="text-align: center;">FORM DESIGN WITH JS VALIDATION</h3>
</header>
<div class="container bg-dark">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6 bg-light boxStyle">
<form name="theform" action="" onSubmit="validate()" >
<div class="form-group">
<div class="width30 floatL"><label>Firstname</label></div>
<div class="width70 floatR"><input id="firstname" class="width100 form-control" name="firstname" type="text" value="" size="20">
</div><br><br>
<div class="form-group">
<div class="width30 floatL"><label>Lastname</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="lastname" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Email</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="email" src="" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Age</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="age" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Address</label></div>
<div class="width70 floatR"><input class="width100 form-control" name="address" type="text" value="" size="20"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Country</label></div>