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

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

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


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

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
        });
      

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


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

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'
        });