pTutorial

New way to learn Programming

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>


Download

See Also


QUOTES OF THE DAY

Whenever man commits a crime,heaven finds a witness.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER