How to change bootstrap input width

To change the width of the inputs use bootstrap sizing utilities or bootstrap grid system.

Useful resources:

Using sizing utilities

Example: To change the width of the inputs to 50% add w-50 class to the .form-outline element.

Input with class w-25

Input with class w-50

Input with class w-75

Input without sizing class 

<p class="mt-3 mb-1">
    Input with class w-25
</p>
<div class="form-outline w-25">
    <input type="text" id="input1" class="form-control" />
    <label class="form-label" for="input1">25% width of the parent</label>
</div>
<p class="mt-3 mb-1">
    Input with class w-50
</p>
<div class="form-outline w-50">
    <input type="text" id="input2" class="form-control" />
    <label class="form-label" for="input2">50% width of the parent</label>
</div>
<p class="mt-3 mb-1">
    Input with class w-75
</p>
<div class="form-outline w-75">
    <input type="text" id="input3" class="form-control" />
    <label class="form-label" for="input3">75% width of the parent</label>
</div>
<p class="mt-3 mb-1">
    Input without sizing class
</p>
<div class="form-outline">
    <input type="text" id="input4" class="form-control" />
    <label class="form-label" for="input4">100% width of the parent</label>
</div>

Using grid

You can always place your inputs within grid columns and rows.

<form>
    <div class="row my-3">
        <div class="col-md-6">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">First name</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">Surname</label>
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col-md-12">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">Adress 1</label>
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col-md-12">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">Adress 2</label>
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col-md-6">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">City</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-outline">
                <input type="text" id="typeText" class="form-control" />
                <label class="form-label" for="typeText">Zip code</label>
            </div>
        </div>
    </div>
    <div class="row my-3">
        <div class="col-md-6">
            <div class="form-outline">
                <input type="email" id="typeEmail" class="form-control" />
                <label class="form-label" for="typeEmail">Email</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-outline">
                <input type="tel" id="typePhone" class="form-control" />
                <label class="form-label" for="typePhone">Phone number </label>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center">
        <button type="button" class="btn btn-primary">Sign up</button>
    </div>
</form>