"Dynamic Form Fields - Add & Remove"
Bootstrap 3.3.0 Snippet by mfurlend

Post to Facebook Tweet this

<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 ----------> <html> <head> <link rel="stylesheet" href="/styles/liveblend.css" type="text/css"/> </head> <div class="container-full"> <div class="row"> <div class="col-lg-12 text-center v-center"> <h1>Hello Landing</h1> <p class="lead">A sign-up page example for Bootstrap 3</p> <br> <div class="input-group input-group-lg col-sm-offset-4 col-sm-4"> <form class="form-inline"> <div class="form-group"> <label for="model">Model</label> <input type="text" class="form-control" id="model-1" placeholder="GFS"> </div> <div class="form-group"> <label for="percent">%</label> <input type="email" class="form-control" id="percent-1" placeholder="50"> </div> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </form> </div> </div> </div> <!-- /row --> <div class="row"> <div class="col-lg-12 text-center v-center" style="font-size:39pt;"> <a href="#"><i class="icon-google-plus"></i></a> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-github"></i></a> <a href="#"><i class="icon-pinterest"></i></a> </div> </div> <br><br><br><br><br> </div> <!-- /container full --> <div class="container"> <hr> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"><h3>Hello.</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"><h3>Hello.</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"><h3>Hello.</h3></div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <br><br> <p class="pull-right"><a href="http://www.bootply.com">Template from Bootply</a>   ©Copyright 2013 ACME<sup>TM</sup> Brand.</p> <br><br> </div> </div> </div> </html>
@import url(http://fonts.googleapis.com/css?family=Antic+Slab); html,body { height:100%; } h1 { font-family: 'Antic Slab', serif; font-size:80px; color:#DDCCEE; } .lead { color:#DDCCEE; } /* Custom container */ .container-full { margin: 0 auto; width: 100%; min-height:100%; background-color:#110022; color:#eee; overflow:hidden; a{ color:#efefef; text-decoration:none; } } .v-center { margin-top:7%; } .entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }

Related: See More

Paper Kit 2 PRO Angular
Bootstrap 4 Animated Dynamic Form
Dynamic Sortable Tables
login-form

Questions / Comments: