<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <form method="post" action="update.php" class="ng-pristine ng-valid"> <div class="modal-content"> <div class="modal-header subscribe-bg subscribe-block"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Subscribe our Newsletter </h4> </div> <div class="modal-body"> <fieldset class="form-group inline-label"> <input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="John Doe"> <label for="formGroupExampleInput">Your name</label> </fieldset> <fieldset class="form-group inline-label"> <input type="text" name="email" class="form-control" id="formGroupExampleInput2" placeholder="mail@gmail.com"> <label for="formGroupExampleInput2">Your email</label> </fieldset> <fieldset class="form-group inline-label"> Yes: <input type="radio" name="human" value="yes"> No: <input type="radio" name="human" value="no" checked="checked"> <label for="formGroupExampleInput2">Are you human?:</label> </fieldset> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" name="addSubscriber" class="btn btn-primary">Subscribe</button> </div> </form> </div> </div> </div>

.twPc-div { background: #fff none repeat scroll 0 0; border: 1px solid #e1e8ed; border-radius: 6px; height: 200px; max-width: 340px; // orginal twitter width: 290px; } .subscribe-bg { background-image: url("https://pbs.twimg.com/profile_banners/50988711/1384539792/600x200"); background-position: 0 50%; background-size: 100% auto; border-bottom: 1px solid #e1e8ed; border-radius: 4px 4px 0 0; height: 95px; width: 100%; } .subscribe-block { display: block !important; } .modal-title { color: white; } .inline-label{ position: relative; } .inline-label label { position: absolute; top: 0; font-size: 80%; color: #788991; font-weight: bold; padding: 6px 12px; } .inline-label .form-control{ padding-top: 24px; height: auto; } .inline-label .form-control:focus{ box-shadow: none; } .inline-label .form-control:focus + label{ color: #29abe9; } .twPc-button { margin: -35px -10px 0; text-align: right; width: 100%; } .twPc-avatarLink { background-color: #fff; border-radius: 6px; display: inline-block !important; float: left; margin: -30px 5px 0 8px; max-width: 100%; padding: 1px; vertical-align: bottom; } .twPc-avatarImg { border: 2px solid #fff; border-radius: 7px; box-sizing: border-box; color: #fff; height: 72px; width: 72px; } .twPc-divUser { margin: 5px 0 0; } .twPc-divName { font-size: 18px; font-weight: 700; line-height: 21px; } .twPc-divName a { color: inherit !important; } .twPc-divStats { margin-left: 11px; padding: 10px 0; } .twPc-Arrange { box-sizing: border-box; display: table; margin: 0; min-width: 100%; padding: 0; table-layout: auto; } ul.twPc-Arrange { list-style: outside none none; margin: 0; padding: 0; } .twPc-ArrangeSizeFit { display: table-cell; padding: 0; vertical-align: top; } .twPc-ArrangeSizeFit a:hover { text-decoration: none; } .twPc-StatValue { display: block; font-size: 18px; font-weight: 500; transition: color 0.15s ease-in-out 0s; } .twPc-StatLabel { color: #8899a6; font-size: 10px; letter-spacing: 0.02em; overflow: hidden; text-transform: uppercase; transition: color 0.15s ease-in-out 0s; }