keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Bootstrap Maxlength

Bootstrap Maxlength.

Bootstrap-Maxlength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work. Click here

Default usage

Easily limit and display character count in input fields with Bootstrap Maxlength's default setup.

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

<label class="form-label">Basic example</label>
<input type="text" class="form-control bs-maxlength" maxlength="25">
<div class="form-text">The badge will show up by default when the remaining chars are 10 or less.</div>

Threshold value

Customize when the character counter appears by adjusting the threshold value.

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

<label class="form-label">Threshold example</label>
<input type="text" maxlength="25" class="form-control bs-maxlength-threshold">
<div class="form-text">Do you want the badge to show up when there are 20 chars or less?</div>

Textarea

Enables time selection without requiring a date input.

Bootstrap maxlength supports textarea as well as inputs.

<label class="form-label">Threshold example</label>
<textarea class="form-control bs-maxlength-textarea" maxlength="225" rows="5" placeholder="This textarea has a limit of 225 chars."></textarea>
<div class="form-text">Bootstrap maxlength supports textarea as well as inputs.</div>

Maxlength 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'.

bottom-right, top-right, top-left, bottom-left and centered-right.

<input type="text" maxlength="25" class="form-control bs-maxlength-top-start">

<input type="text" maxlength="25" class="form-control bs-maxlength-top-end">

<input type="text" maxlength="25" class="form-control bs-maxlength-bottom-end">

<input type="text" maxlength="25" class="form-control bs-maxlength-bottom-start">

Custom Text

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

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

<label class="form-label">Custom text</label>
<input type="text" maxlength="25" class="form-control bs-maxlength-custom">
<div class="form-text">Do you want the badge to show up when there are 20 chars or less?</div>