Extended Controls

Bootstrap Maxlength

Basic Usage

Default threshold value is 10. The badge will show up right below the input after entering 10 or more chars. This is default value and position for threshold.

Always Show Indicator

if alwaysShow: true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input.

Change Indicator Format

Some attributes are used to change badge format. Attributes : separator,preText,postText,andvalidate.

Indicator Position

The field counter can be positioned at the top, bottom, left or right. All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

Support Textarea

Bootstrap maxlength supports textarea as well as inputs.

Indicator on the corners

You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left and bottom-left.

Show Indicator after 6 chars

Use the threshold option to show up badge when there are 15 chars or less

Change Indicator Color

warningClass is the class of the element with the indicator. By default is badge badge-success but can be changed to anything you'd like.

limitReachedClass is the class the element gets when the limit is reached. By default is badge badge-important badge-danger but can be changed to anything you'd like.

Indicator Inside

You can also place the maxlength indicator inside the input: centered-right.

Fully Featured


Date Mask dd/mm/yyyy
International Number +19 999 999 999
Purchase Order aaaa 9999-****
Currency $9999
SSN 999-99-9999
Percentage 99%
Phone (999) 999-9999
Phone / xEx (999) 999-9999 / x999999
Credit Card Number 9999 9999 9999 9999
Decimal using RadixPoint 123.654658
ISBN 999-99-999-9999-9
RTL attribute dd/mm/yyyy


Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.

Card Number
Card Name
Expiry Date
Card Number
Navbar Color Options

Layout Options

Sidebar menu Background

Sidebar Background Image
background image
background image
background image
background image