<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Contact us</h3>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group row">
<div class="col-md-4">
<label for="name">Name</label>
</div>
<div class="col-md-8">
<input type="text" id="name" class="form-control" placeholder="Type your name here">
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="lastName">Last name</label>
</div>
<div class="col-md-8">
<input type="text" id="lastName" class="form-control" placeholder="Type your last name here">
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="email">E-mail</label>
</div>
<div class="col-md-8">
<input type="text" id="email" class="form-control" placeholder="Type your e-mail">
</div>
</div>
<div class="form-group row">
<div class="col-md-4">
<label for="phone">Phone</label>
</div>
<div class="col-md-8">
<input type="text" id="phone" class="form-control" placeholder="So we can reach you">
</div>
</div>
<div class="form-group row">
<p class="text-center">We are sorry if you are experiecing any problems. We will try our best to reach you in 24h. </p>
</div>
<div class="form-group row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<button class="btn btn-primary">Submit request</button>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="form-group row">
<div class="col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-3">
<label>Or you can reach us via</label>
</div>
</div>
<div class="form-group row">
<div class="col-md-8 col-md-offset-2">
<div class="social row">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary"><span class="fa fa-2x fa-facebook"></span></a>
<a href="#" class="btn btn-danger"><span class="fa fa-2x fa-google"></span></a>
<a href="#" class="btn btn-primary"><span class="fa fa-2x fa-linkedin"></span></a>
<a href="#" class="btn btn-info"><span class="fa fa-2x fa-twitter"></span></a>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-xs-3 col-xs-offset-5 col-md-3 col-md-offset-5">- OR -</label>
</div>
<div class="form-group row">
<div class="col-md-8 col-md-offset-2">
<h4>Bulgaria</h4>
<p>91, Lorem Street</p>
<p>Entrance A</p>
<p>Floor 4</p>
<p>Phone: +359-123-345-567</p>
<p>E-mail: <a href="#">support@shieldui.com</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
body {
font-family: 'PT Sans', sans-serif;
}
.container-fluid {
background: url("http://prepbootstrap.com/Content/images/shared/misc/contact-us.png");
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
hr {
border: 1px solid #354458;
}
.panel {
margin-top: 50px;
margin-right: 10px;
}
.col-md-8 > button {
display: block;
margin: auto;
}
.social > a {
width: 100%;
}
</style>