How to partition input field to appear as separate input fields on screen? : <p>Look at the image:</p>

<p><a href="https://i.stack.imgur.com/LoVqe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LoVqe.png" alt="enter image description here"></a></p>

<p>I want design something like in the image, where a 4 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 4 separate inputs and then combining values in javascript:</p>

<pre><code>&lt;input type="text" class="form-control" placeholder="0" maxlength="1"  /&gt;
&lt;input type="text" class="form-control" placeholder="0" maxlength="1" /&gt;
&lt;input type="text" class="form-control" placeholder="0" maxlength="1" /&gt;
&lt;input type="text" class="form-control" placeholder="0" maxlength="1" /&gt;
</code></pre>

<p>I am not sure if this is correct approach. I think there must be some styling options by which one input textbox would appear as partitioned one like in the image. Is it possible using bootstrap? How to style one input control to be appeared as partitioned field of inputs?</p>
