How it works

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. For more info, please visit the bootstrap-maxlength

The badge will show up by default when the remaining chars are 10 or less
Set threshold value to show there are 20 chars or less left
Bootstrap maxlength supports textarea as well as inputs
The field counter can be positioned at the top, bottom, left or right. 
<!-- Plugin Js -->
<script src="assets/bundles/maxlength.bundle.js"></script>

<!-- HTML  -->
<input type="text" class="form-control form-control-lg mb-1" id="bs_maxlength_basic" maxlength="10">

<!-- Jquery Page Js -->
<script>    
	// basic
	$('#bs_maxlength_basic').maxlength({
		warningClass: "badge bg-primary",
		limitReachedClass: "badge bg-success"
	});
</script>