<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <img alt="Google" class="logo" src="//ssl.gstatic.com/accounts/ui/logo_2x.png"/> <div class="account-wall accountchooser"> <h1 class="title"> Choose an account</h1> <ol class="accounts"> <li> <button type="submit" name="Email" value="example@gmail.com"> <img class="account-image" alt="" src="//lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=46"/> <span class="account-name">Bhaumik Patel</span> <span class="account-email">example@gmail.com </span> </button> </li> <li> <button type="submit" name="Email" value="example1@gmail.com"> <img class="account-image" alt="" src="//lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=46"/> <span class="account-name">Bhaumik Patel</span> <span class="account-email">example1@gmail.com </span> </button> </li> </ol> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <div class="account-wall accountchooser action"> <ul> <li><a href="http://www.jquery2dotnet.com">Add account </a></li> <li><a href="http://www.jquery2dotnet.com">Remove</a></li></ul> </div> </div> </div> </div>

.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; padding-top: 5px; } .account-wall { margin-top: 20px; padding: 20px 25px 30px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .logo { margin: 25px auto 20px; float: none; display: block; height: 38px; width: 116px; } .title { font-size: 20px; color: #262626; margin: 0 0 15px; font-weight: normal; } .accountchooser ol { width: 100%; margin: 0; list-style: none; padding: 0; } .accountchooser ol li { height: 76px; border-top: 1px solid #d5d5d5; } .accountchooser ol li button { padding: 15px 0; display: block; width: 100%; height: 100%; outline: none; border: 0; cursor: pointer; text-align: left; background: url(//ssl.gstatic.com/accounts/ui/arrow_right_1x.png) right center no-repeat; background-size: 21px 21px; } .accountchooser ol li button img { float: left; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; height: 46px; width: 46px; } .accountchooser ol li button span.account-name { font-weight: bold; font-size: 16px; padding-top: 3px; color: #427fed; } .accountchooser ol li button span { display: block; margin-left: 58px; padding-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action { padding: 5px; } .action ul { width: 100%; margin: 0; list-style: none; padding: 0; } .action ul li:first-child { border-right: 1px solid #d5d5d5; } .action ul li { width: 49%; display: inline-block; } .action ul li a { color: #427fed; cursor: pointer; text-decoration: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; display: inline-block; background: none; text-align: center; padding: 12px 0; outline: none; text-decoration: none; border: 0; }