Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div style="width: 250px;">
    <h2>Normal Form</h2>
    <form>
      <div class="form-group">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">
            <i class="icon-fixed-width icon-search"></i>
          </span>
          <input class="form-control" placeholder="foo NEAR bar" 
                 data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">
            <i class="icon-fixed-width icon-step-backward"></i>
          </span>
          <input class="form-control" type="text" 
                 data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg">
          <span class="input-group-addon">
            <i class="icon-fixed-width icon-step-forward"></i>
          </span>
          <input class="form-control" type="text" 
                 data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
        </div>
      </div>
      <div class="form-group">
        <div class="btn-group btn-group-lg pull-right">
          <span class="btn btn-default"><i class="icon-download-alt"></i></span>
          <span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
        </div>
      </div>
    </form>
  </div>
 
  <div style="width: 250px;">
    <h2>Horizontal Form</h2>
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group input-group-lg">
            <span class="input-group-addon">
              <i class="icon-fixed-width icon-search"></i>
            </span>
            <input class="form-control" placeholder="foo NEAR bar" 
                   data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group input-group-lg">
            <span class="input-group-addon">
              <i class="icon-fixed-width icon-step-backward"></i>
            </span>
            <input class="form-control" type="text" 
                   data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group input-group-lg">
            <span class="input-group-addon">
              <i class="icon-fixed-width icon-step-forward"></i>
            </span>
            <input class="form-control" type="text" 
                   data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-12">
          <div class="btn-group btn-group-lg pull-right">
            <span class="btn btn-default"><i class="icon-download-alt"></i></span>
            <span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
davidpauljuniorpro
0viewers