<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="icon-addon addon-lg"> <input type="text" placeholder="البريد الالكتروني :" class="form-control" id="البريد الالكتروني :"> </div> <div class="icon-addon addon-lg"> <input type="text" placeholder="الرقم السري :" class="form-control" id="الرقم السري :"> </div> </div> </div>

.input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #fff; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon.addon-lg .form-control { line-height: 1.33; height: 39px; font-size: 18px; padding: 10px 16px 10px 40px; width: 253px; margin: 4px 33px; background: inherit; color: white; } .icon-addon.addon-lg .glyphicon { font-size: 18px; margin-left: 0; left: 11px; top: 4px; } .icon-addon:hover .glyphicon{ color: #FFFFFF }