<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 ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <p># Avoid using <span class="text-danger">select</span> elements here as they cannot be fully styled in WebKit browsers.</p> </div> </div> <div class="row"> <div class="col-xs-12"> <h2>Basic example</h2> <form role="form"> <div class="form-group"> <label for="exampleInput">Input text</label> <input type="text" class="form-control" id="exampleInput"> </div> <div class="form-group"> <label for="exampleInputEmail1">Textarea</label> <textarea class="form-control" rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputEmail1">Select</label> <select class="form-control"> <option>1</option> <option>2</option> </select> </div> </form> </div> </div> <div class="row"> <div class="col-xs-12"> <h2>Height sizing</h2> <form role="form"> <div class="form-group"> <input class="form-control input-lg" type="text" placeholder=".input-lg"> </div> <div class="form-group"> <input class="form-control" type="text" placeholder="Default input"> </div> <div class="form-group"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> </div> </form> </div> </div> <div class="row"> <div class="col-xs-12"> <h2>Input groups</h2> <form role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> </div> </form> </div> </div> <div class="row"> <div class="col-xs-12"> <h2>Button addons</h2> <form role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div> </form> </div> </div> </div>

.form-control { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-sm { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form-group-sm .form-control { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-lg { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form-group-lg .form-control { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group-addon { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group-addon.input-sm { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group-addon.input-lg { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }