Input group width

Bootstrap 5 Input group width component

Responsive Input group width built with Bootstrap 5. To change the width of the inputs use bootstrap sizing utilities or bootstrap grid system.

Using sizing utilities

To change the width of the inputs to 50% add .w-50 class to the .input-group element.

Input with class .w-25

Input with class .w-50

Input with class .w-75

Input without sizing class

Edit in sandbox 
        
            
                <p class="mb-0">Input with class .w-25</p>
                <div class="input-group w-25 mb-3">
                    <input type="text" class="form-control" placeholder="25% width of the parent" aria-label="25% width of the parent" aria-describedby="basic-addon1" />
                </div>
                <p class="mb-0">Input with class .w-50</p>
                <div class="input-group w-50 mb-3">
                    <input type="text" class="form-control" placeholder="50% width of the parent" aria-label="50% width of the parent" aria-describedby="basic-addon2" />
                </div>
                <p class="mb-0">Input with class .w-75</p>
                <div class="input-group w-75 mb-3">
                    <input type="text" class="form-control" placeholder="75% width of the parent" aria-label="75% width of the parent" aria-describedby="basic-addon3" />
                </div>
                <p class="mb-0">Input without sizing class</p>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="100% width of the parent" aria-label="100% width of the parent" aria-describedby="basic-addon4" />
                </div>

Using grid

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

Email

Password

Address

Address 2

City

Zip

Edit in sandbox 
        
            
                <form>
                    <!-- Grid row -->
                    <div class="row">
                        <!-- Grid column -->
                        <div class="col-md-6">
                            <p class="mb-0">Email</p>
                            <!-- Material input -->
                            <div class="input-group mb-3">
                                <input type="email" class="form-control" id="inputEmail4MD" placeholder="Email" />
                            </div>
                        </div>
                        <!-- Grid column -->

                        <!-- Grid column -->
                        <div class="col-md-6">
                            <p class="mb-0">Password</p>
                            <!-- Material input -->
                            <div class="input-group mb-3">
                                <input type="password" class="form-control" id="inputPassword4MD" placeholder="Password" />
                            </div>
                        </div>
                        <!-- Grid column -->
                    </div>
                    <!-- Grid row -->

                    <!-- Grid row -->
                    <div class="row">
                        <!-- Grid column -->
                        <div class="col-md-12">
                            <p class="mb-0">Address</p>
                            <!-- Material input -->
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St" />
                            </div>
                        </div>
                        <!-- Grid column -->

                        <!-- Grid column -->
                        <div class="col-md-12">
                            <p class="mb-0">Address 2</p>
                            <!-- Material input -->
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor" />
                            </div>
                        </div>
                        <!-- Grid column -->
                    </div>
                    <!-- Grid row -->

                    <!-- Grid row -->
                    <div class="row">
                        <!-- Grid column -->
                        <div class="col-md-6">
                            <p class="mb-0">City</p>
                            <!-- Material input -->
                            <div class="input-group mb-4">
                                <input type="text" class="form-control" id="inputCityMD" placeholder="New York City" />
                            </div>
                        </div>
                        <!-- Grid column -->

                        <!-- Grid column -->
                        <div class="col-md-6">
                            <p class="mb-0">Zip</p>
                            <!-- Material input -->
                            <div class="input-group mb-4">
                                <input type="text" class="form-control" id="inputZipMD" placeholder="11206-1117" />
                            </div>
                        </div>
                        <!-- Grid column -->
                    </div>
                    <!-- Grid row -->
                    <div class="d-flex justify-content-center">
                        <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-md">Sign in</button>
                    </div>
                </form>