Quicktip: How to make an input type with up and down arrows in Bootstrap 5

We have all seen it in some application: one of these input types where you have an arrow key up and arrow key down at the end to get to the correct number. Much like the arrow buttons when you need to call an elevator.

But how do you make this in Bootstrap 5 without any additional scripts?

I couldn’t find it on the official Bootstrap 5 documentation, so here it is. First thing we need is an input type. The input type needs to be of the type number, like this:

<input type="number" class="form-control" id="amountInput">

Make sure the input type has the class form-control, to apply the bootstrap styling later. I’m also giving the input an id.

Next we gonna need the min attribute. The min attribute is the minimum allowed value or the lowest the number can be. For example setting minimum to 0 will not allow negative values.

Secondly we are going to add the step attribute. The step attribute will decide how big the steps will be when you use the arrow keys in the input type. I’m using 1 because it allows me to increase or decrease the numbers one by one.

The final result should be this:

<input type="number" min="0" step="1" class="form-control" id="amountInput">

And your input should look like this on your webpage. Notice the elevator arrows at the end for some extra user friendliness.

That’s it. Quick and easy right? :)