- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Input Group
Description
Using input groups you can easily prepend and append text or buttons to the text-based inputs.
Basic Input Group
You can create an input group by adding .input-group class within <div> element. Add the text in front of the input by using .input-group-prepend and use .input-group-append class to add the text behind the input. Style the specified text by adding .input-group-text class.
The following example demonstrates basic input group −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Input Group</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "basic-addon1">Username@</span> </div> <input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "basic-addon1"> </div> <div class = "input-group mb-3"> <input type = "text" class = "form-control" placeholder = "Recipient's username" aria-label = "Recipient's username" aria-describedby = "basic-addon2"> <div class = "input-group-append"> <span class = "input-group-text" id = "basic-addon2">@tutorialspoint.com</span> </div> </div> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <span class = "input-group-text">Price in $</span> </div> <input type = "text" class = "form-control" aria-label = "Amount (to the nearest dollar)"> <div class = "input-group-append"> <span class = "input-group-text">.00</span> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Input Group Sizing
You can create small input groups by using .input-group-sm class and large inputs groups by using .input-group-lg class as shown in the example below −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Input Group Sizing</h2> <div class = "input-group input-group-lg"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "inputGroup-sizing-lg">@</span> </div> <input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-lg" placeholder = "Large Input Group"> </div> <br> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "inputGroup-sizing-default">@</span> </div> <input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-default" placeholder = "Default Input Group"> </div> <div class = "input-group input-group-sm mb-3"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "inputGroup-sizing-sm">@</span> </div> <input type = "text" class = "form-control" aria-label = "Sizing example input" aria-describedby = "inputGroup-sizing-sm" placeholder = "Small Input Group"> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Checkbox and Radio Button
You can use checkboxes and radio buttons instead of text within an input group as shown in the below example −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Input Group with Checkbox and Radio Button</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <div class = "input-group-text"> <input type = "checkbox" aria-label = "Checkbox for following text input"> </div> </div> <input type = "text" class = "form-control" aria-label = "Text input with checkbox" placeholder = "Checkbox"> </div> <div class = "input-group"> <div class = "input-group-prepend"> <div class = "input-group-text"> <input type = "radio" aria-label = "Radio button for following text input"> </div> </div> <input type = "text" class = "form-control" aria-label = "Text input with radio button" placeholder = "Radio button"> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Multiple Inputs
You can add multiple inputs to an input group as shown in the example below −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Multiple Inputs</h2> <div class = "input-group"> <div class = "input-group-prepend"> <span class = "input-group-text">User Name and Password</span> </div> <input type = "email" aria-label = "User Name" class = "form-control"> <input type = "password" aria-label = "Password" class = "form-control"> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Input Group Buttons and with Dropdown Button
You can add button in an input group by adding .btn class within the .input-group class and also you can add dropdowns within the .input-group class.
The following example demonstrates adding of input Group buttons and along with dropdown button −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Input Group Button</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <button class = "btn btn-outline-info" type = "button" id = "button-addon1">Button</button> </div> <input type = "text" class = "form-control" placeholder = "Button in Input Group" aria-label = "Example text with button addon" aria-describedby = "button-addon1"> </div> <h2>Input Group with Dropdown Button</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <button class = "btn btn-outline-info dropdown-toggle" type = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Dropdown</button> <div class = "dropdown-menu"> <a class = "dropdown-item" href = "#">Option #1</a> <a class = "dropdown-item" href = "#">Option #2</a> <a class = "dropdown-item" href = "#">Option #3</a> <div role = "separator" class = "dropdown-divider"></div> <a class = "dropdown-item" href = "#">Option #4</a> </div> </div> <input type = "text" class = "form-control" aria-label = "Text input with dropdown button" placeholder = "Dropdown in Input Group"> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
Output
Custom Forms
You can create custom select and custom file inputs in an input group. The following example demonstrates this −
Example
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <div class = "container"> <h2>Custom Select</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <label class = "input-group-text" for = "inputGroupSelect01">Select Options</label> </div> <select class = "custom-select" id = "inputGroupSelect01"> <option selected>Select</option> <option value = "1">Option #1</option> <option value = "2">Option #2</option> <option value = "3">Option #3</option> </select> </div> <h2>Custom File Input</h2> <div class = "input-group mb-3"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "inputGroupFileAddon01">Attach Files</span> </div> <div class = "custom-file"> <input type = "file" class = "custom-file-input" id = "inputGroupFile01" aria-describedby = "inputGroupFileAddon01"> <label class = "custom-file-label" for = "inputGroupFile01">Choose Files</label> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −
To Continue Learning Please Login
Login with Google