<div class="container-fluid">
<div class="row ">
<div class="col-sm-6 bg">
</div>
<div class="col-sm-6 bg-dark text-white">
<div class="row pt-5">
<div class="col-md-8 col-sm-10 offset-sm-1 offset-md-2">
<h4>Get More things done with Logging platform.</h4>
<p>Access to the most powerfull tool in the entire design and web industry.</p>
<div class="login">
<button type="button" class="btn btn-warning m-0">Login</button>
<button type="button" class="btn btn-primary ">Register</button>
<form action="" class="pt-3">
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
Please fill the following information.
</div>
<input type="email" name="" id="" class="form-control" required placeholder="E-mail Address">
<input type="password" name="" id="" class="form-control" required placeholder="Password">
<a class="nav-item nav-link pl-0" href="#"> Forget password?</a>
<button class="btn btn-primary">Submit</button>
</form>
<div class="login-social">
<span class="pull-left mt-4 mr-4">Or login with</span>
<ul class="pull-left">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="google"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.bg { background:url(https://images.pexels.com/photos/926987/pexels-photo-926987.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) center; height: 100vh; background-size: cover; }
.login {}
.login a {}
.login input { background: #fff; border: none; margin: 10px 0px; padding:20px; height: 50px; }
.login-social ul { list-style-type: none; margin: 0; padding: 0;}
.login-social ul li { float: left; text-align: center; margin-top: 20px; }
.login-social ul li a { display: block; width:35px; height: 35px; margin: 5px; color: #fff; font-size: 21px; line-height: 35px;}
.login-social ul li.facebook { background: #3B5998 ; }
.login-social ul li.google { background: #dd4b39 ; }
.login-social ul li.twitter { background: #00aced ;}