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
@

Bellow are guidelines on using input groups (according to the official document).

Appending
@example.com
Using a label
https://example.com/users/
Prepending + appending
$
.00
Using a textarea
With textarea

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

Multiple inputs

First and last name
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

Multiple addons

$0.00
$0.00

Button addons

Buttons with dropdowns

Split buttons

Custom forms

Examples using custom forms

Custom select
Custom file input
Upload
Upload

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.

Learn more

Fluid variation

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Using .jumbotron-fluid sets full width without rounded corners.