Bootstrap Form Example
Bootstrap Form
As you know Bootstrap is a very powerfull HTML, CSS, JavaScript framework to develope mobile friendly websites. Now a days Bootstrap is very popular in web development.
In this article we demonstrate, how to create responsive form using bootsrap with the help of live example.
HTML Bootstrap Form Example
<html> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container-fluid"> <div class="row form-list-row mrg-top clearfix"> <div class="col-xs-12 col-sm-12 col-md-8 no-rpad"> <div class="row com-marg"> <div class="col-xs-12 col-sm-12 col-md-12"> <h2>Bootstrap form example</h2> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group"> <label><span style="color: red;"><sup>*</sup> </span> Customer Care Number</label> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <input type="text" class="form-control" name="phone_text" title="Customer Care Number" placeholder="9560518944"> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group"> <label> Sec. Customer Care Number</label> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <input type="text" class="form-control" name="secondary_phone_text" title="Secondary Customer Care Phone No" placeholder="9999999999"> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group"> <label><span style="color: red;"><sup>*</sup> </span>Email Address</label> <input type="text" class="form-control" name="email_text" title="Email address" placeholder="info@ptutorial.com"> </div> <div class="col-xs-12 col-sm-6 col-md-6 com-marg form-group"> <label>From Email <span style="font-size: 11px;"> (Will be used to send email)</span></label> <input type="text" class="form-control" name="from_email" title="From Email" placeholder="abc@xyz.com"> </div> </div> <div class="clear"></div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 com-marg"> <a class="btn btn-default" >Save</a> <p class="btn btn-danger" >Cancel</p></div> </div> </div> </div> </div> </div> </div> </body> </html>
