Bootstrap 5 Input group Custom file input

Bootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.

Bootstrap 5 Input group Custom file input Classes

There is no specific class used to Input group Custom file input. To create a button, we use the .btn class and make a combination of input with type="file" with other input-group classes as needed

Syntax:

<div class="input-group">
 <label class="input-group-text" for="">....</label>
 <input type="file" class="form-control" id="">
</div>

Example 1: The below example demonstrates the Input group Custom file input by styling the label.

Output:

Example 2: The below example demonstrates the Input group Custom file input by styling the label by adding the button with the file input using input-group class.

Output:

Reference:https://getbootstrap.com/docs/5.0/forms/input-group/#custom-file-input