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.

                <div class="d-flex justify-content-center mb-4">
                    <div 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>
                    <button type="button" class="btn btn-primary">Button</button>

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