Form-control automatically added and cannot be removed

Hello,

I customized the inputs style of my page and it looks ok when I don’t put my elements inside a <form> element:

<input type="number" id=".." class="xx_range" max="200" value="199.980" min="0" step="0.02">EEE</h3>
<input class="form-range" type="range" id=".." value="199.980" min="0" max="200" step="0.02"></div>
<input type="number" id=".." class="xx_range" min="0" step="1" value="1" max="2" name="x">XXX</h3>
<input class="form-range" type="range" id=".." value="8.98285714285714" min="0" max="1" step="1"></div>
<input type="number" id=".." class="xx_range" min="1" step="1" value="1" max="1" name="z">aa</h3>
<input class="form-range" type="range" id=".." value="1" min="1" max=".000000500" step="1"></div>
<input type="number" id=".." class="xx_range" step="1" value="2" max="4" name="e">ZZZ</h3>
<input class="form-range" type="range" id=".." value="2" min="2" max="3" step="1"></div>

But when I add them inside a <form> element, Bootstrap Studio adds form-control class to each input which kills all my design:

<input type="number" id=".." class="xx_range form-control" max="200" value="199.980" min="0" step="0.02">EEE</h3>
<input class="form-range form-control" type="range" id=".." value="199.980" min="0" max="200" step="0.02"></div>
<input type="number" id=".." class="xx_range form-control" min="0" step="1" value="1" max="2" name="x">XXX</h3>
<input class="form-range form-control" type="range" id=".." value="8.98285714285714" min="0" max="1" step="1"></div>
<input type="number" id=".." class="xx_range form-control" min="1" step="1" value="1" max="1" name="z">aa</h3>
<input class="form-range form-control" type="range" id=".." value="1" min="1" max=".000000500" step="1"></div>
<input type="number" id=".." class="xx_range form-control" step="1" value="2" max="4" name="e">ZZZ</h3>
<input class="form-range form-control" type="range" id=".." value="2" min="2" max="3" step="1"></div>

Unfortunately, on the input the class is locked in Bootstrap Studio and cannot be removed. Any solution to remove it / not add that class to each input ? Or maybe this should be considered as a bug as this class should be optionnal and not locked ?

Thanks

The form-control class can be removed from inputs. Select the input, go to the Options panel (top right) and switch the Unstyled option on. Note that in the case of Range Inputs, this will also remove the form-range class that is automatically added. You can add it manually from the Attributes panel if it is required.

image

Hope this helps!

1 Like

It works, thank you so much !!