Open In App

Bootstrap 5 Input group Custom file input

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Bootstrap 5 Input group Custom file input

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



Last Updated : 22 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads