Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
<form action="#">
<div class="form-group">
<label class="form-label">Phone</label>
<input type="text" placeholder="" data-mask="(999) 999-9999" class="form-control">
<span class="form-text text-muted">(999) 999-9999</span>
</div>
<div class="form-group">
<label class="form-label">Date</label>
<input type="text" placeholder="" data-mask="99/99/9999" class="form-control">
<span class="form-text text-muted">dd/mm/yyyy</span>
</div>
<div class="form-group">
<label class="form-label">SSN field 1</label>
<input type="text" placeholder="" data-mask="999-99-9999" class="form-control">
<span class="form-text text-muted">e.g "999-99-9999"</span>
</div>
<div class="form-group">
<label class="form-label">Phone field + ext.</label>
<input type="text" placeholder="" data-mask="+40 999 999 999" class="form-control">
<span class="form-text text-muted">+40 999 999 999</span>
</div>
<div class="form-group">
<label class="form-label">Product Key</label>
<input type="text" placeholder="" data-mask="a*-999-a999" class="form-control">
<span class="form-text text-muted">e.g a*-999-a999</span>
</div>
<div class="form-group">
<label class="form-label">Currency</label>
<input type="text" placeholder="" data-mask="$ 999,999,999.99" class="form-control">
<span class="form-text text-muted">$ 999,999,999.99</span>
</div>
<div class="form-group">
<label class="form-label">Date 2</label>
<input type="text" placeholder="" data-mask="99-99-9999" class="form-control">
<span class="form-text text-muted">dd-mm-yyyy</span>
</div>
<div class="form-group">
<label class="form-label">Eye Script</label>
<input type="text" placeholder="" data-mask="~9.99 ~9.99 999" class="form-control">
<span class="form-text text-muted">~9.99 ~9.99 999</span>
</div>
<div class="form-group">
<label class="form-label">Percent</label>
<input type="text" placeholder="" data-mask="99%" class="form-control">
<span class="form-text text-muted">e.g "99%"</span>
</div>
<div class="form-group mb-0">
<label class="form-label">Pc Ip</label>
<input type="text" placeholder="" data-mask="999.999.999.9999" class="form-control">
<span class="form-text text-muted">e.g "999.999.999.9999"</span>
</div>
</form>
Name | Values | description |
---|---|---|
data-mask="[value]" |
(999) 999-9999 / ... / | Actives the data mask |
<!-- Jasny-bootstrap JavaScript -->
<script src="vendors/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>