Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller.
When I assign the class "col-6" to both fields, they end up being the same length but lack the necessary spacing required for my design. Adding spacing causes one of the items to move to the next line.
Snippet available at: https://jsfiddle.net/p81z7Lfg/1/
<div class="container">
<div class="row">
<input type="text" class="col mr-1" value="1">
<input type="text" class="col ml-1" value="2">
</div>
<div class="row">
<input type="text" class="col mr-1" value="3">
<select class="col ml-1">
<option selected>4</option>
</select>
</div>
<div class="row"></div>
<div class="row">
<input type="text" class="col mr-1" value="1">
<input type="text" class="col ml-1" value="2">
</div>
<div class="row">
<input type="text" class="col-6 mr-1" value="3">
<select class="col-6 ml-1">
<option selected>4</option>
</select>
</div>
</div>
An elegant Bootstrap solution would be ideal to maintain project consistency in styling and coding without resorting to custom CSS within Bootstrap components.
Appreciate your assistance.