Can anyone help me solve a challenge I'm facing with styling my input field without it becoming too large? Currently, when I apply the w-25 class to the input (which sets its width to 25%), the width adjusts based on its original size rather than that of the parent container. As a result, there is blank space inside the container. While I could manually set the width in pixels, I am required to use only bootstrap and avoid custom CSS. Any suggestions for a different approach?
<div class="container my-5">
<h1 class="fw-normal">Fibonacci Calculator</h1>
<div id="calculatorContainer" class="d-flex align-items-center">
<span>The Fibonacci Of</span>
<small>
<input
type="number"
class="mx-2 d-inline-block w-25"
placeholder="#"
/>
<button type="button" class="btn btn-primary">ls</button>
</small>
</div>
</div>
If you want to see the code in action, check out this Codepen link: https://codepen.io/amirovalex-the-animator/pen/OJjgbpo