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.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= rel="stylesheet"> <script src= </script> <script src= </script></head> <body> <div class="container text-center"> <div class="mt-1"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Input group Custom file input</h5> </div> <div class="input-group mb-4"> <label class="input-group-text text-bg-success" for="inputGroupFile01"> Select file </label> <input type="file" class="form-control" id="inputGroupFile01"> </div> <div class="input-group "> <input type="file" class="form-control" id="inputGroupFile02"> <label class="input-group-text text-bg-primary" for="inputGroupFile02"> Upload file </label> </div> </div></body> </html> |
Output:
Bootstrap 5 Input group Custom file input
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.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= rel="stylesheet"> <script src= </script> <script src= </script></head> <body> <div class="container text-center "> <div class="mt-1"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Input group Custom file input</h5> </div> <div class="input-group mb-4"> <button class="btn btn-secondary"> Button </button> <input type="file" class="form-control" id="inputGroupFile03"> </div> <div class="input-group mb-4"> <input type="file" class="form-control" id="inputGroupFile04"> <button class="btn btn-success"> Button </button> </div> </div> </body></html> |
Output:
Bootstrap 5 Input group Custom file input
Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#custom-file-input
Please Login to comment...