Bootstrap 5 Input group Custom file input
Last Updated :
22 Dec, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...