Bootstrap 4 tutorial
Components (6): Input group / Jumbotron
Input group
The input group is the extension for input elements (input, textarea, etc.) to add text, buttons, or button groups.
Basic example
Prepending
@
- Input group (outer frame)
div.input-group- Prepending group
div.input-group-prependspan.input-group-textAttribute- (Accessibility) attribute
id="basic-addon1" - Text
@
- (Accessibility) attribute
- Form control
input.form-controlAttributes- Attribute
type="text" - Attribute
placeholder="Username" - Accessibility attribute
aria-label="Username" - Accessibility attribute
aria-describedby="basic-addon1"
- Attribute
- Prepending group
Bellow are guidelines on using input groups (according to the official document).
- Only one form control can be used in the input group
- Multiple form controls in a single input group causes problems on Bootstrap style validation
- Labels must be used outside the input group
- Or it may cause a problem on accessibility
Caution: The rules are not strict. Some examples in the official documant do not follow above rules.
(On version 4.0) Support for validation is (slightly) incomplete. On displaying validation response, borders are not rounded (see validation example below).
Appending
@example.com
- Input group (outer frame)
div.input-group- Form control
input.form-control - Appending group
div.input-group-append
- Form control
Using a label
https://example.com/users/
label(should be used outside the input group) Attribute- Attribute
for="basic-url"(same asinputID) - Text
Your vanity URL
- Attribute
- Input group (outer frame)
- Prepending group
- Form control
input- Attribute
id="basic-url"
- Attribute
Prepending + appending
$
.00
- Input group (outer frame)
- Prepending group
- Form group
- Appending group
Using a textarea
With textarea
- Input group (outer frame)
- Prepending group
- Text area
textarea.form-control
Sizing
Add .input-group-(sm|lg) to div.input-group
div.input-group.input-group-sm
Small
div.input-group
Default
div.input-group.input-group-lg
Large
Checkboxes and radios
Checkboxes
Radios
- Input group (outer frame)
- Prepending group
div.input-group-prependdiv.input-group-text(for setting backgroud)- Checkboxes/radios - inline (see link for detail)
- Prepending group
Warning: These examples use multiple form controls in single input group (cause problems on Bootstrap style validation).
Multiple inputs
First and last name
- List group (outer frame)
- Prepending group
- Form controls (×2) (can be 3 or more)
Validation
Using multiple input controls causes problems on Bootstrap style validation. However, using single common invalid response for all input controls is OK (see example below).
First and last name
Please input your name
- Input group (outer frame) Attribute
- Added
.was-validatedto indicate validation behaviors - Prepending group
- Form controls
input.form-control(×2) Attribute- Added
required
- Added
- Response message on invalid
div.invalid-response- Text
Please input your name
- Text
- Added
Multiple addons
$0.00
- Input group (outer frame)
- Prepending group 1 with text
$ - Prepending group 2 with text
0.00 - Form control
- Prepending group 1 with text
$0.00
- Input group (outer frame)
- Form control
- Appending group 1 with text
$ - Appending group 2 with text
0.00
Button addons
- Input group (outer frame)
- Prepending group
div.input-group-prepend- Outline button
button.btn.btn-outline-secondaryAttribute- Attribute
type="button" - Text
Button
- Attribute
- Outline button
- Form control
- Prepending group
- Input group (outer frame)
- Form control
- Appending group
div.input-group-append- Outline button
- Input group (outer frame)
- Prepending group
- Outline button (×2)
- Form control
- Prepending group
- Input group (outer frame)
- Form control
- Appending group
- Outline button (×2)
Buttons with dropdowns
- Input group (outer frame)
- Prepending group
div.input-group-prepend- Outline button with dropdown
button.btn.btn-outline-secondaryAttributes- Class
.dropdown-toggle - Attribute
type="button" - Attribute
data-toggle="dropdown" - Accessibilirty attribute
aria-haspopup="true" - Accessibilirty attribute
aria-expanded="false" - Text
Dropdown
- Class
- Menu (item list)
div.dropdown-menu- See Dropdown - Examples for menu items
- Outline button with dropdown
- Form control
- Prepending group
- Input group (outer frame)
- Form control
- Appending group
div.input-group-append- Outline button with dropdown
- Item list
Split buttons
- Input group (outer frame)
- Prepending group
div.input-group-prepend- Outline button
button.btn.btn-outline-secondaryAttribute- Attribute
type="button" - Text
Action
- Attribute
- Split button
button.btn.btn-outline-secondaryAttributes- Class
.dropdown-toggle - Class
.dropdown-toggle-split - Attribute
type="button" - Attribute
data-toggle="dropdown" - Accessibility attribute
aria-haspopup="true" - Accessibility attribute
aria-expanded="false" - For screen reader
span.sr-only- Text
Toggle Dropdown
- Text
- Class
- Menu (item list)
div.dropdown-menu- See Dropdown - Examples for menu items
- Outline button
- Form control
- Prepending group
- Input group (outer frame)
- Form control
- Appending group
div.input-group-append- Outline button
- Split button dropdown
- Item list
Custom forms
Examples using custom forms
Caution: Examples below (taken from the official document) do not follow the guideline that labels should be used outside the input groups (may cause a problem on accessibility).
Custom select
- Input group (outer frame)
- Prepending group
- Label
label.input-group-textAttribute- Attribute
for="inputGroupSelect1" - Text
Options
- Attribute
- Label
- Custom select
select.custom-selectAttribute- Attribute
id="inputGroupSelect1" - Item
option ...(×4)
- Attribute
- Prepending group
- Input group (outer frame)
- Custom select
- Appending group
- Input group (outer frame)
- Prepending group
- Outline button
- Custom select
- Input group (outer frame)
- Custom select
- Appending group
- Outline button
Custom file input
Upload
- Input group (outer frame)
- Prepending group (Upload)
- Custom file browser
div.custom-file- Control
input.custom-file-inputAttributes- Attribute
id="inputGroupFile1" - Attribute
type="file"
- Attribute
- Label
label.custom-file-labelAttribute- Attribute
for="inputGroupFile1" - Text
Choose file
- Attribute
- Control
Browse (on right) is a part of a custom file browser. Also, the filename part (initially Choose file ) does not change automatically by selecting a file. JavaScript is required for update. See Custom file browser - Code example (set to the examples below).
Upload
- Input group (outer frame)
- Custom file browser (until Browse on the right)
- Appending group (Upload)
- Input group (outer frame)
- Prepending group
- Outlie button
- Custom file browser
- Input group (outer frame)
- Custom file browser
- Appending group
- Outline button
Jumbotron
Basic example
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
div.jumbotronh1.display-4- Text
Hello, world!
- Text
p.lead- Text
This is a simple hero unit, ...
- Text
hr.my-4p- Text
It uses utility classes ...
- Text
p.leada.btn.btn-primary.btn-lgAttributes- Attribute
href="#" - Accessibility attribute
role="button" - Text
Learn more
- Attribute