<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 ----------> <!-- BEGIN # BOOTSNIP INFO --> <div class="container"> <div class="row"> <p class="text-center"><a href="#" class="btn btn-danger btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Request Detail</a></p> </div> </div> <!-- END # BOOTSNIP INFO --> <!-- BEGIN # MODAL LOGIN --> <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" align="center"> <img id="img_logo" src="http://pg.gaarsam.com/pgimg/propertes-guro-logo.png"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> </div> <!-- Begin # DIV Form --> <div id="div-forms"> <!-- Begin # Login Form --> <form id="login-form"> <div class="modal-body"> <p style="font-weight:Bold;">I am:     <label class="radio-inline"><input type="radio" name="optradio">Agent</label> <label class="radio-inline"><input type="radio" name="optradio">Builder</label> <label class="radio-inline"><input type="radio" name="optradio">Individual</label> </P> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user "></span> </span> <input type="text" class="form-control" id="name" placeholder="Enter your name" required="required" /></div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter your email" required="required" /></div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span> </span> <input type="phone" class="form-control" id="phone" placeholder="Enter your phone no." required="required" /></div> </div> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> <textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required" placeholder="Message">Please send me more details of your property '3 BHK Studio Apartment for sale in Janakpuri, Delhi'.</textarea> </div> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-danger btn-sm">Request Detail</button> </div> </div> </form> <!-- End # Login Form --> </div> <!-- End # DIV Form --> </div> </div> </div> <!-- END # MODAL LOGIN -->

@import url(http://fonts.googleapis.com/css?family=Roboto); * { font-family: 'Roboto', sans-serif; } #login-modal .modal-dialog { width: 350px; } #img_logo { max-height: 100px; max-width: 100px; } .btn { border-radius: 0px; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; } .btn-sm, .btn-group-sm>.btn { border-radius: 0px; } .btn-link { padding: 5px 10px 0px 0px; color: #95a5a6; } .btn-link:hover, .btn-link:focus { color: #2c3e50; text-decoration: none; } .glyphicon { top: 0px; } .form-control { border-radius: 0px; }