<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div class="container">
<br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p>
<hr>
<div class="row">
<aside class="col-sm-4">
<p>Login form style 1</p>
<div class="card">
<article class="card-body">
<a href="" class="float-right btn btn-outline-primary">Sign up</a>
<h4 class="card-title mb-4 mt-1">Sign in</h4>
<form>
<div class="form-group">
<label>Your email</label>
<input name="" class="form-control" placeholder="Email" type="email">
</div> <!-- form-group// -->
<div class="form-group">
<a class="float-right" href="#">Forgot?</a>
<label>Your password</label>
<input class="form-control" placeholder="******" type="password">
</div> <!-- form-group// -->
<div class="form-group">
<div class="checkbox">
<label> <input type="checkbox"> Save password </label>
</div> <!-- checkbox .// -->
</div> <!-- form-group// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Login </button>
</div> <!-- form-group// -->
</form>
</article>
</div> <!-- card.// -->
</aside> <!-- col.// -->
<aside class="col-sm-4">
<p>Login form style 2</p>
<div class="card">
<article class="card-body">
<a href="" class="float-right btn btn-outline-primary">Sign up</a>
<h4 class="card-title mb-4 mt-1">Sign in</h4>
<p>
<a href="" class="btn btn-block btn-outline-info"> <i class="fab fa-twitter"></i> Login via Twitter</a>
<a href="" class="btn btn-block btn-outline-primary"> <i class="fab fa-facebook-f"></i> Login via facebook</a>
</p>
<hr>
<form>
<div class="form-group">
<input name="" class="form-control" placeholder="Email or login" type="email">
</div> <!-- form-group// -->
<div class="form-group">
<input class="form-control" placeholder="******" type="password">
</div> <!-- form-group// -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Login </button>
</div> <!-- form-group// -->
</div>
<div class="col-md-6 text-right">
<a class="small" href="#">Forgot password?</a>
</div>
</div> <!-- .row// -->
</form>
</article>
</div> <!-- card.// -->
</aside> <!-- col.// -->
<aside class="col-sm-4">
<p>Login form style 3</p>
<div class="card">
<article class="card-body">
<h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
<hr>
<p class="text-success text-center">Some message goes here</p>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="" class="form-control" placeholder="Email or login" type="email">
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" placeholder="******" type="password">
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Login </button>
</div> <!-- form-group// -->
<p class="text-center"><a href="#" class="btn">Forgot password?</a></p>
</form>
</article>
</div> <!-- card.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</div>
<!--container end.//-->