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

25% width of the parent

Input with class w-50

50% width of the parent

Input with class w-75

75% width of the parent

Input without sizing class

100% width of the parent

HTML

        
            
          <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.

First name

Surname

Adress 1

Adress 2

City

Zip code

Phone number

HTML

        
            
          <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>