<section>
  <div class="row">
    <div class="container">
      <div class="col-sm-8 col-sm-offset-2">
        <form>
          <div class="row">
            <div class="col-sm-5 col-sm-offset-1 form-group">
              <p>Sign in with your account</p>
              <div class="input-group form-group">
                <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
                </span>
                <input class="form-control" type="text" placeholder="Email address">
              </div>
              <div class="input-group form-group">
                <span class="input-group-addon">
                  <i class="fa fa-key fa-fw"></i>
                </span>
                <input class="form-control" type="password" placeholder="Password">
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-default">
                  Sign in
                  <i class="fa fa-arrow-circle-right fa-fw"></i>
                </button>
              </div>
            </div>
            <div class="col-sm-5 form-group">
              <p>Sign in using social media</p>
              <a href="#" class="twitter btn btn-block" role="button">
                <i class="fa fa-twitter-square fa-fw"></i>
                Login with Twitter
              </a>
              <a href="#" class="linkedin btn btn-block" role="button">
                <i class="fa fa-linkedin-square fa-fw"></i>
                Login with Linkedin
              </a>
              <a href="#" class="facebook btn btn-block" role="button">
                <i class="fa fa-facebook-square fa-fw"></i>
                Login with Facebook
              </a>
              <a href="#" class="google-plus btn btn-block" role="button">
                <i class="fa fa-google-plus-square fa-fw"></i>
                Login with Google+
              </a>
            </div>
    		 </div>
        </form>
		 </div>
	 </div>
  </div>
</section>

<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/" target="_blank">See article</a>.</p>
/*------------------------------------------------------------------
      						SECTION STYLES
-------------------------------------------------------------------*/

body {
  overflow: hidden;
}

.container {
  width: auto;
}

section form {
	background: #ededed;
	height: 220px;
   margin-top: 20px;
}

section form p {
	padding: 7px 0;
	text-align: left;
	font-style: italic;
}

section form .col-sm-5 {
	height: 200px;
	margin-top: 10px;
}

section form .col-sm-5:first-child {
	border-right: 1px solid #ccc;
}

section form button:hover i{
	position: relative;
	right: -3px;
}

section form a {
	color: white;
}

section form a.twitter {
	background: #00aced;
}

section form a.linkedin {
	background: #007bb6;
}

section form a.facebook {
	background: #3b5998;
}

section form a.google-plus {
	background: #dd4b39;
}

.p {
  text-align: center;
  margin-top: 120px;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.