|
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 ClassesThere 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</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:
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</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:
Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#custom-file-input
|
Bootstrap 5 Accented Tables.png){kind=small}
Bootstrap 5 Responsive Tables
Bootstrap 5 Display Hiding Elements