Input and button on same line

Bootstrap 5 Input and button on same line component

Responsive Input and button on same line built with Bootstrap 5. A simple example of how easily and quickly set input and button on the same line.

Basic example

Add input and button to div with .d-flex class.

You can also use the input group component.

Edit in sandbox 
        
            
                <div class="d-flex justify-content-center mb-4">
                    <div data-mdb-input-init class="form-outline me-3" style="width: 14rem">
                        <input type="text" id="form1" class="form-control" />
                        <label class="form-label" for="form1">Example input</label>
                    </div>
                    <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Button</button>
                </div>

                <!-- Input group -->
                <div class="d-flex justify-content-center">
                    <div class="input-group w-auto">
                        <input
                          type="text"
                          class="form-control"
                          placeholder="Example input"
                          aria-label="Example input"
                          aria-describedby="button-addon1"
                        />
                        <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" type="button" id="button-addon1" data-mdb-ripple-color="dark">
                            Button
                        </button>
                    </div>
                </div>