How to use Bootstrap Input Group with Icon In Bootstrap
Here, we have used the input-group class along with the icon using the input-group-text class. There is an icon through which the user can upload multiple files in the application. We have used JavaScript to display the uploaded images on the screen in a proper layout.
Example: In this example, we will be creating a custom input file with Bootstrap 5 with Icon.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title>Custom Input File</title> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h1 class="text-success"> w3wiki </h1> <h3 class="mb-4"> Approach 2: Using Bootstrap Input Group with Icon </h3> <div class="input-group mb-3"> <label class="input-group-text" for="customFile"> <i class="bi bi-file-earmark-image"></i> </label> <input type="file" class="form-control visually-hidden" id="customFile" accept="image/*" multiple onchange="showFiles(this)"> <button class="btn btn-success" type="button" onclick="document.getElementById('customFile').click()"> Choose Files </button> </div> <div class="mt-3"> <div class="row" id="imagePreviews"></div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script> <script> function showFiles(input) { const previewsContainer = document.getElementById('imagePreviews'); previewsContainer.innerHTML = ''; const files = input.files; for (let i = 0; i < files.length; i++) { const file = files[i]; const reader = new FileReader(); reader.onload = function (e) { const preview = document.createElement('div'); preview.classList.add('col-md-4', 'mb-3'); preview.innerHTML = ` <img src="${e.target.result}" alt="Preview" class="img-fluid rounded"> <div class="text-center mt-2"> <span class="badge bg-secondary">${file.name}</span> </div> `; previewsContainer.appendChild(preview); }; reader.readAsDataURL(file); } } </script> </body> </html> |
Output:
How to Create Custom Input File with Bootstrap 5 ?
This article will show you how to create a custom input file using the Bootstrap 5 library. Bootstrap 5 has various styling file input classes and functionalities that can enhance the visual appearance of custom file input. There are two different approaches along with their implementation. In both conditions, uploading a single file and multiple files from the local drive to the application.