Change input size multiple inputs, Bootstrap 5

April 26, 2022

I’m trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).

Here is the code:

    <div class="row">
            <!-- left column -->
            <div class="col-5">

                <div class="input-group my-3">
                    <label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
                    <input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
                    <input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
                </div>

>Solution :

you can use width for input text.use this code:

<div class="row">
<!-- left column -->
<div class="col-5">

    <div class="input-group my-3">
        <label class="col-form-label">
            clientname:
        </label>
        <div class="d-flex">
            <input type="text" class="form-control w-25" name="clientname"
            value="" />
        <input type="text" class="form-control " name="clientID"
            value="" style="width: 10%;" />
        </div>
      
    </div>
</div>