Bootstrap 4 set a width of input-group inputs
I've found a solution on the internet and you can visit it at codeply!.
It is pretty neat and simple. To do so, you just need to add the following CSS to your stylesheet.
.input-group>.input-group-prepend {
flex: 0 0 30%;
}
.input-group .input-group-text {
width: 100%;
}
To set the width of the input-group-text, just change the value of the flex of the input-group, for instance, as seen above 30% of the total width.
Thank the author of the link above for this simple code snippet.
I found a solution. I tried set max-width instead of only width and it works. For the above example it would be:
#preselection {
max-width: 15%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="telephone">Telephone</label>
<div class="row">
<div class="col-12">
<div class="input-group telephone-input">
<div class="input-group-prepend preselection-prepend">
<div class="input-group-text">+</div>
</div>
<input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>
<input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>
<span class="placeholder" id="tele-holder"></span>
<div class="input-group-append" id="preselectionToggle">
<div class="input-group-text">
<i class="far fa-plus-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>You can do it with class w-50 and w-100
like this
<div class="input-group">
<div class="input-group-prepend w-50">
<span class="input-group-text w-100">label</span>
</div>
<input type="text" class="form-control " />
</div>