Bootstrap Input Group: How To Use Bootstrap 4 Input Groups

This Bootstrap Input Group Tutorial explains various usages of Bootstrap 4 Input Groups such as with Buttons, Checkboxes, Dropdowns and more:

In this tutorial, we have covered basic input groups, their sizes, input groups with radio buttons, with checkboxes, with multiple inputs,  with multiple addons, with buttons, with button dropdowns, and frequently asked questions.

Please note that we have used Bootstrap version 4 in all the examples.

=> Check ALL Bootstrap Tutorials Here

Introduction To Bootstrap Input Groups

Bootstrap 4 Input GroupsBootstrap 4 Input Groups

Input groups are extended form controls. They are used to easily add text, radio buttons, checkboxes, buttons, or button dropdowns to the text inputs/<input type=”text”>s.

Usually, an input group consists of two parts.

  1. Addon – It can consist of text, radio buttons, checkboxes, buttons, or button dropdowns.
  2. Text input/<input type=”text”>

The below table summarizes the classes of input groups that we have used in this tutorial.

ClassUsage

The .input-group classThis class act as a container for input groups.

The .input-group-prepend classThis class is used to add an addon in front of the text input.

The .input-group-append classThis class is used to add an addon behind the text input.

The .input-group-text classThis class is used for styling the addons.

The .input-group-sm classThis class is used to create a small input group.

The .input-group-lg classThis class is used to create a large input group.

Basic Bootstrap Input Groups

Usually, basic input groups consist of text-based (including symbols such as @, $, etc) addons.

Follow the below steps to create a Basic Input Group.

  • Wrap the text input and the text/textual addon in a <div> element with the .input-group class. The .input-group class functions as a container for input groups.
  • Use the .input-group-prepend class to place the text/textual addon in front of the text input or the .input-group-append class to place the text/textual addon behind the text input.
  • Then, wrap the addon text in a <span> element with the .input-group-text class.
  • Next, add the .form-control class to the text input.

Input Group Sizes

There are three sizes as stated below.

  1. Small input groups
  2. Default size input groups
  3. Large input groups

#1) Small Input Groups: Add the .input-group-sm class to create a small input group. It sets the height of the group to a smaller height than the default height.

#2) Default Size Input Groups: There is no need to add a specific class for a default size input group.

#3) Large Input Groups: Add the .input group-lg class to create a large input group. It sets the height of the group to a larger height than the default height.

Examples Of Basic Bootstrap Input Groups

The below programming code shows examples of basic input groups in various sizes.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">

<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Type your username">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type your email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>

<label>Amount:</label>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text">USD</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>

<div class="input-group input-group-sm mb-2">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-lg mb-3 ">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>

</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Examples of Basic Bootstrap Input Groups - output

Examples of Basic Bootstrap Input Groups - output

Input Group With Radio Button

Instead of text, you can also add a radio button to a text input to create an input group (with a radio button).

Follow the below steps to create an input group with a radio button.

  • Wrap the text input and the radio button in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the radio button in front of the text input or the .input-group-append class to place the radio button behind the text input.
  • Then, wrap the <input type=”radio”> element in a <div> element with the .input-group-text class.
  • Next, add the .form-control class to the text input.

Input Group With Checkbox

Add a checkbox to a text input to create an input group (with a checkbox).

Follow the below steps to create an input group with a checkbox.

  • Wrap the text input and the checkbox in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the checkbox in front of the text input or the .input-group-append class to place the checkbox behind the text input.
  • Then, wrap the <input type=”checkbox”> element in a <div> element with the .input-group-text class.
  • Next, add the .form-control class to the text input.

Examples Of Input Group With Radio Button And Checkbox

The below programming code shows examples of input groups with radio buttons and checkboxes.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">

<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control" placeholder="Type here...">
</div>

<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control" placeholder="Type here...">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio">
</div>
</div>
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...">
<div class="input-group-append">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
</div>
</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Examples of Input Group with Radio Button and Checkbox - outputExamples of Input Group with Radio Button and Checkbox - output

Input Groups With Multiple Inputs

Bootstrap supports input groups with two or more text inputs (multiple inputs).

Follow the below steps to create an input group with multiple inputs.

  • Wrap the text inputs and the addon in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the addon in front of the text inputs or the .input-group-append class to place the addon behind the text inputs.
  • Then, wrap the addon text in a <span> element with the .input-group-text class.
  • Next, add the .form-control class to the text inputs.

Input Groups With Multiple Addons

Similar to input groups with multiple inputs, Bootstrap supports groups with multiple addons as well. You can also mix multiple addons with checkboxes and radio buttons.

Follow the below steps to create an input group with multiple addons.

  • Wrap the text input and the addons in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the addons in front of the text input or the .input-group-append class to place the addons behind the text input.
  • Then, wrap the addon texts in <span> elements with the .input-group-text class.
  • Next, add the .form-control class to the text input.

Examples Of Input Groups With Multiple Inputs And Multiple Addons

The below programming code shows examples of input groups with multiple inputs and multiple addons.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">

<h6 class="text-primary">Multiple Inputs</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Last Name">
<input type="text" class="form-control" placeholder="First Name">
<div class="input-group-append">
<span class="input-group-text">Name</span>
</div>
</div>

<h6 class="text-primary">Multiple Addons</h6>
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">per</span>
<span class="input-group-text">kg</span>
</div>
</div>

<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Amount</span>
<span class="input-group-text">USD</span>
</div>
<input type="text" class="form-control">
</div>

<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
<span class="input-group-text">USD</span>
</div>
<input type="text" class="form-control">
</div>

</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Examples of Multiple Inputs and Multiple AddonsExamples of Multiple Inputs and Multiple Addons

Input Groups With Buttons

You can add a button to a text input to create an input group (with a button).

Follow the below steps to create an input group with a button.

  • Wrap the text input and the button in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the button in front of the text input or the .input-group-append class to place the button behind the text input.
  • Next, add the .form-control class to the text input.

Input Groups With Button Dropdowns

You can also add a button dropdown to a text input to create an input group (with a button dropdown). Further, you can add a segmented button dropdown to the text input as well.

Follow the below steps to create an input group with a button dropdown.

  • Wrap the text input and the button dropdown in a <div> element with the .input-group class.
  • Use the .input-group-prepend class to place the button dropdown in front of the text input or the .input-group-append class to place the button dropdown behind the text input.
  • Next, add the .form-control class to the text input.

Examples Of Input Groups With Buttons And Button Dropdowns

The below programming code shows examples of input groups with buttons and dropdowns.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">

<h6 class="text-primary">Input Groups with Buttons</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-success">Button</button>
</div>
<input type="text" class="form-control" placeholder="Write here...">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Write here...">
<div class="input-group-append">
<button type="button" class="btn btn-success">Button</button>
</div>
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Entrer key word">
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit">Search</button>
</div>
</div>

<h6 class="text-primary">Input Groups with Button Dropdowns</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Write here...">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Write here...">
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
</div>
</div>
</div>

<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</div>
<input type="text" class="form-control">
</div>

</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Examples of Input Groups with Buttons and Button DropdownsExamples of Input Groups with Buttons and Button Dropdowns

Frequently Asked Questions About Bootstrap 4 Input Group

Q #1) What is an input group?

Answer: Input groups are extended form controls. It is used to easily add text, radio buttons, checkboxes, buttons, or button dropdowns to the text inputs.

Q #2) Which class acts as a container for input groups?

Answer: The .input-group class acts as a container for input groups.

Q #3) What is the purpose of the .input-group-prepend class?

Answer: The .input-group-prepend class is used to add an addon in front of the text input field.

Q #4) What is the purpose of the .input-group-append class?

Answer: The .input-group-append class is used to add an addon behind the text input field.

Q #5) Which main classes are used to create Bootstrap radio button groups?

Answer: The main classes used to create Bootstrap radio button groups are the .form-check class, the .form-check-input class, and the .form-check-label class.

Q #6) Which main classes are used to create checkboxes with input groups?

Answer: The main classes used to create checkboxes with input groups are the .form-check class, the .form-check-input class, and the .form-check-label class.

Q #7) What are the other sizes of input groups, apart from the default size?

Answer: The other sizes are small and large input groups.

Q #8) Which class is used to create a small input group?

Answer: The .input-group-sm class is used to create a small input group.

Q #9) Which class is used to create a large input group?

Answer: The .input-group-lg class is used to create a large input group.

Q #10) Does Bootstrap 4 support input groups with multiple inputs?

Answer: Yes, it supports input groups with multiple inputs.

Q #11) Does Bootstrap 4 support input groups with multiple addons?

Answer: Yes, it supports input groups with multiple addons.

Conclusion

Input groups are extended form controls for adding text, radio buttons, checkboxes, buttons, or button dropdowns to the text-based inputs. Bootstrap provides several classes for the styling of input groups.

Hope you would have found this tutorial helpful.

=> Visit Here To See The Bootstrap Training Series For All

Bài viết liên quan
Bài Mới Nhất
Alternate Text Gọi ngay