Components (6): Input group / Jumbotron
The input group is the extension for input elements (input
, textarea
, etc.) to add text, buttons, or button groups.
div.input-group
div.input-group-prepend
span.input-group-text
Attribute
id="basic-addon1"
@
input.form-control
Attributes
type="text"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
Bellow are guidelines on using input groups (according to the official document).
div.input-group
input.form-control
div.input-group-append
label
label
(should be used outside the input group) Attribute
for="basic-url"
(same as input
ID)Your vanity URL
input
id="basic-url"
textarea
textarea.form-control
Add .input-group-(sm|lg)
to div.input-group
div.input-group.input-group-sm
div.input-group
div.input-group.input-group-lg
Checkboxes
Radios
div.input-group-prepend
div.input-group-text
(for setting backgroud)
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).
.was-validated
to indicate validation behaviorsinput.form-control
(×2) Attribute
required
div.invalid-response
Please input your name
$
0.00
$
0.00
div.input-group-prepend
button.btn.btn-outline-secondary
Attribute
type="button"
Button
div.input-group-append
div.input-group-prepend
button.btn.btn-outline-secondary
Attributes
.dropdown-toggle
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
Dropdown
div.dropdown-menu
div.input-group-append
div.input-group-prepend
button.btn.btn-outline-secondary
Attribute
type="button"
Action
button.btn.btn-outline-secondary
Attributes
.dropdown-toggle
.dropdown-toggle-split
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
span.sr-only
Toggle Dropdown
div.dropdown-menu
div.input-group-append
Examples using custom forms
select
label.input-group-text
Attribute
for="inputGroupSelect1"
Options
select.custom-select
Attribute
id="inputGroupSelect1"
option ...
(×4)div.custom-file
input.custom-file-input
Attributes
id="inputGroupFile1"
type="file"
label.custom-file-label
Attribute
for="inputGroupFile1"
Choose file
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.jumbotron
h1.display-4
Hello, world!
p.lead
This is a simple hero unit, ...
hr.my-4
p
It uses utility classes ...
p.lead
a.btn.btn-primary.btn-lg
Attributes
href="#"
role="button"
Learn more
This is a modified jumbotron that occupies the entire horizontal space of its parent.
Using .jumbotron-fluid
sets full width without rounded corners.
div.jumbotron.jumbotron-fluid
must be a direct child of body
(or it sets full width inside the parent)
div.container
(for appropriate centering)
h1.display-4
Fluid jumbotron
p
This is a modified jumbotron ...