Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3 navbar-fixed-top</a>
        </div>
    </div>

    <form>
        <div class="form-group">
            <label>field 1 *</label>
            <input type="text" class="form-control" required="required" />
        </div>
        
        <div class="form-group">
            <label>field 2 *</label>
            <input type="text" class="form-control" required="required" />
        </div>
        
        <div class="form-group">
            <label>field 3 *</label>
            <input type="text" class="form-control" required="required" />
        </div>
        
        <p class="lead add-margin">
            Imagine, here are more input fields and you are forced to scroll down...
        </p>
        
        <p class="add-margin">
            <button type="submit" class="btn btn-default">Submit</button>
        </p>
    </form>
</div>

<footer class="container add-margin">
    <p class="add-margin">this might be a footer</p>
</footer>

CSS

body {
    margin: 60px;
}

.add-margin {
    margin-top: 200px
}

.form-group {
    margin: 5px 0
}

JavaScript

var headerHeight;
var reposition = function() {
    headerHeight || (headerHeight = jQuery('.navbar-fixed-top').outerHeight() + 20);
    setTimeout(function() {
        window.scrollBy(0, -headerHeight);
    }, 50);
};

jQuery(document).on('click', 'form :submit', function(e) {
      var form;
      if ((form = jQuery(e.target).closest('form')).length !== 1) {
        return;
      }
      if (!form[0].checkValidity || form[0].checkValidity()) {
        return;
      }
      reposition();
});