MaxChar

Default

The badge will show up by default when the remaining chars are 10 or less:

$('input[maxlength]').maxlength();

Threshold value

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:

                $('input.className').maxlength({
                    threshold: 20
                });
                

Few options

                $('input.className').maxlength({
                    alwaysShow: true,
                    threshold: 10,
                    warningClass: "label label-success",
                    limitReachedClass: "label label-danger"
                });
                

All options

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted.

Please note: if the alwaysShow option is enabled, the threshold option is ignored.

                $('input.className').maxlength({
                  alwaysShow: true,
                  threshold: 10,
                  warningClass: "label label-success",
                  limitReachedClass: "label label-danger",
                  separator: ' of ',
                  preText: 'You have ',
                  postText: ' chars remaining.',
                  validate: true
                });
                

Textareas

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

                $('textarea#textarea').maxlength({
                    alwaysShow: true
                });
                

Position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-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'.

                $('input#placement').maxlength({
                    alwaysShow: true,
                    placement: 'top-left'
                });