I am currently working on creating an input form with small fields and signs between them. https://i.sstatic.net/THjhs.png
Right now, I am using a combination of classic HTML and Bootstrap-Vue, as shown in the screenshot. It is functional, but the issue is that it is not responsive on mobile screens. Here is how it looks on mobile:
https://i.sstatic.net/nnbSB.png
The last field gets covered by the button, and the fields themselves are too small to display the input properly.
If I use only Bootstrap, the fields and spacings become too large, and I struggle to make them smaller. I believe having the button on a new line on mobile would be a better approach. But, how can I achieve this?
Here is a snippet of my code:
<b-row>
<b-col class="mt-3" cols="2">
</b-col>
<b-col class="mt-3">
<b>Kundennummer:</b>
</b-col>
</b-row>
<b-row>
<b-col class="mt-3" cols="2">
</b-col>
<b-col class="mt-3 ml-0" cols="4">
<table>
<tr>
<td class="m-0 p-0">
<b-form-input id="case_no_0" ref="case_no_0" type="text" v-model="custNo[0]" :state="state[0]" maxlength="3" @focus="$event.target.select()" @input="formatter(0)"></b-form-input>
</td>
<td class="m-0 p-0">
.
</td>
<td class="m-0 p-0">
<b-form-input id="case_no_1" ref="case_no_1" type="text" v-model="custNo[1]" :state="state[1]" maxlength="3" @focus="$event.target.select()" @input="formatter(1)"></b-form-input>
</td>
<td class="m-0 p-0">
.
</td>
<td class="m-0 p-0">
<b-form-input id="case_no_2" ref="case_no_2" type="text" v-model="custNo[2]" :state="state[2]" maxlength="3" @focus="$event.target.select()" @input="formatter(2)"></b-form-input>
</td>
<td class="m-0 p-0">
-
</td>
<td class="m-0 p-0">
<b-form-input id="case_no_3" ref="case_no_3" type="text" v-model="custNo[3]" :state="state[3]" maxlength="4" @focus="$event.target.select()" @input="formatter(3)" @keyup.enter="validateAndSave()"></b-form-input>
</td>
</tr>
</table>
</b-col>
<b-col class="mt-3">
<b-button class="btn-evm-orange" @click="validateAndSave()">Senden</b-button>
</b-col>
</b-row>EDIT:
For those wondering why I don't solely use Bootstrap and in response to Sirence's answer
The fields become excessively large with Bootstrap alone, while I aim to keep them small and compact, just enough for three numbers. Here is a comparison of screenshots:
PC-View
https://i.sstatic.net/xdl0W.png
Mobile-View