Input Group

Search…
Input Group
Basic Input Group
Basic
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <span class="input-group-text" id="basic-addon1">@</span>
5
    </div>
6
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
7
</div>
8
<!-- /input group -->
9
​
10
<!-- Input Group -->
11
<div class="input-group mb-3">
12
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
13
    <div class="input-group-append">
14
        <span class="input-group-text" id="basic-addon2">@example.com</span>
15
    </div>
16
</div>
17
<!-- /input group -->
18
​
19
<!-- Input Group -->
20
<label for="basic-url">Your vanity URL</label>
21
<div class="input-group mb-3">
22
    <div class="input-group-prepend">
23
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
24
    </div>
25
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
26
</div>
27
<!-- /input group -->
28
​
29
<!-- Input Group -->
30
<div class="input-group mb-3">
31
    <div class="input-group-prepend">
32
        <span class="input-group-text">$</span>
33
    </div>
34
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
35
    <div class="input-group-append">
36
        <span class="input-group-text">.00</span>
37
    </div>
38
</div>
39
<!-- /input group -->
40
​
41
<!-- Input Group -->
42
<div class="input-group">
43
    <div class="input-group-prepend">
44
        <span class="input-group-text">With textarea</span>
45
    </div>
46
    <textarea class="form-control" aria-label="With textarea"></textarea>
47
</div>
48
<!-- /input group -->
Copied!
Sizing Input Group
Sizing
Source Code
1
<!-- Input Group -->
2
<div class="input-group input-group-sm mb-3">
3
    <div class="input-group-prepend">
4
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
5
    </div>
6
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
7
</div>
8
<!-- /input group -->
9
​
10
<!-- Input Group -->
11
<div class="input-group mb-3">
12
    <div class="input-group-prepend">
13
        <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
14
    </div>
15
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
16
</div>
17
<!-- /input group -->
18
​
19
<!-- Input Group -->
20
<div class="input-group input-group-lg">
21
    <div class="input-group-prepend">
22
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
23
    </div>
24
    <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
25
</div>
26
<!-- /input group -->
Copied!
Checkbox & radio Input Group
Checkbox & radio
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <div class="input-group-text">
5
            <input type="checkbox" aria-label="Checkbox for following text input">
6
        </div>
7
    </div>
8
    <input type="text" class="form-control" aria-label="Text input with checkbox">
9
</div>
10
<!-- /input group -->
11
​
12
<!-- Input Group -->
13
<div class="input-group">
14
    <div class="input-group-prepend">
15
        <div class="input-group-text">
16
            <input type="radio" aria-label="Radio button for following text input">
17
        </div>
18
    </div>
19
    <input type="text" class="form-control" aria-label="Text input with radio button">
20
</div>
21
<!-- /input group -->
Copied!
Multiple Inputs
Multiple Input
Source Code
1
<!-- Input Group -->
2
<div class="input-group">
3
    <div class="input-group-prepend">
4
        <span class="input-group-text">First and last name</span>
5
    </div>
6
    <input type="text" class="form-control">
7
    <input type="text" class="form-control">
8
</div>
9
<!-- /input group -->
Copied!
Multiple Addons
Multiple Addons
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <span class="input-group-text">$</span>
5
        <span class="input-group-text">0.00</span>
6
    </div>
7
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
8
</div>
9
<!-- /input group -->
10
​
11
<!-- Input Group -->
12
<div class="input-group">
13
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
14
    <div class="input-group-append">
15
        <span class="input-group-text">$</span>
16
        <span class="input-group-text">0.00</span>
17
    </div>
18
</div>
19
<!-- /input group -->
Copied!
Button Addons
Button Addons
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <button class="btn btn-outline-primary" type="button">Button</button>
5
    </div>
6
    <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
7
</div>
8
<!-- /input group -->
9
​
10
<!-- Input Group -->
11
<div class="input-group mb-3">
12
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
13
    <div class="input-group-append">
14
        <button class="btn btn-outline-primary" type="button">Button</button>
15
    </div>
16
</div>
17
<!-- /input group -->
18
​
19
<!-- Input Group -->
20
<div class="input-group mb-3">
21
    <div class="input-group-prepend">
22
        <button class="btn btn-outline-primary" type="button">Button</button>
23
        <button class="btn btn-outline-primary" type="button">Button</button>
24
    </div>
25
    <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
26
</div>
27
<!-- /input group -->
28
​
29
<!-- Input Group -->
30
<div class="input-group">
31
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
32
    <div class="input-group-append">
33
        <button class="btn btn-outline-primary" type="button">Button</button>
34
        <button class="btn btn-outline-primary" type="button">Button</button>
35
    </div>
36
</div>
37
<!-- /input group -->
Copied!
Buttons with dropdowns
Buttons with Dropdown
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
            Dropdown
6
        </button>
7
​
8
        <!-- Dropdown Menu -->
9
        <div class="dropdown-menu">
10
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
11
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
12
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
13
            <div role="separator" class="dropdown-divider"></div>
14
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
15
        </div>
16
        <!-- /dropdown menu -->
17
​
18
    </div>
19
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
20
</div>
21
<!-- /input group -->
22
​
23
<!-- Input Group -->
24
<div class="input-group">
25
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
26
    <div class="input-group-append">
27
        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
28
            Dropdown
29
        </button>
30
​
31
        <!-- Dropdown Menu -->
32
        <div class="dropdown-menu">
33
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
34
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
35
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
36
            <div role="separator" class="dropdown-divider"></div>
37
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
38
        </div>
39
        <!-- /dropdown menu -->
40
​
41
    </div>
42
</div>
43
<!-- /input group -->
Copied!
Segmented buttons
Segmented button
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <button type="button" class="btn btn-outline-primary">Action</button>
5
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
6
            <span class="sr-only">Toggle Dropdown</span>
7
        </button>
8
​
9
        <!-- Dropdown Menu -->
10
        <div class="dropdown-menu">
11
            <a class="dropdown-item" href="#">Action</a>
12
            <a class="dropdown-item" href="#">Another action</a>
13
            <a class="dropdown-item" href="#">Something else here</a>
14
            <div role="separator" class="dropdown-divider"></div>
15
            <a class="dropdown-item" href="#">Separated link</a>
16
        </div>
17
        <!-- /dropdown menu -->
18
​
19
    </div>
20
    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
21
</div>
22
<!-- /input group -->
23
​
24
<!-- Input Group -->
25
<div class="input-group">
26
    <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
27
    <div class="input-group-append">
28
        <button type="button" class="btn btn-outline-primary">Action</button>
29
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
30
            <span class="sr-only">Toggle Dropdown</span>
31
        </button>
32
​
33
        <!-- Dropdown Menu -->
34
        <div class="dropdown-menu">
35
            <a class="dropdown-item" href="#">Action</a>
36
            <a class="dropdown-item" href="#">Another action</a>
37
            <a class="dropdown-item" href="#">Something else here</a>
38
            <div role="separator" class="dropdown-divider"></div>
39
            <a class="dropdown-item" href="#">Separated link</a>
40
        </div>
41
        <!-- /dropdown menu -->
42
​
43
    </div>
44
</div>
45
<!-- /input group -->
Copied!
Custom select
Custom Select
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
5
    </div>
6
    <select class="custom-select" id="inputGroupSelect01">
7
        <option selected="">Choose...</option>
8
        <option value="1">One</option>
9
        <option value="2">Two</option>
10
        <option value="3">Three</option>
11
    </select>
12
</div>
13
<!-- /input group -->
14
​
15
<!-- Input Group -->
16
<div class="input-group mb-3">
17
    <select class="custom-select" id="inputGroupSelect02">
18
        <option selected="">Choose...</option>
19
        <option value="1">One</option>
20
        <option value="2">Two</option>
21
        <option value="3">Three</option>
22
    </select>
23
    <div class="input-group-append">
24
        <label class="input-group-text" for="inputGroupSelect02">Options</label>
25
    </div>
26
</div>
27
<!-- /input group -->
28
​
29
<!-- Input Group -->
30
<div class="input-group mb-3">
31
    <div class="input-group-prepend">
32
        <button class="btn btn-outline-primary" type="button">Button</button>
33
    </div>
34
    <select class="custom-select" id="inputGroupSelect03">
35
        <option selected="">Choose...</option>
36
        <option value="1">One</option>
37
        <option value="2">Two</option>
38
        <option value="3">Three</option>
39
    </select>
40
</div>
41
<!-- /input group -->
42
​
43
<!-- Input Group -->
44
​
45
<div class="input-group">
46
    <select class="custom-select" id="inputGroupSelect04">
47
        <option selected="">Choose...</option>
48
        <option value="1">One</option>
49
        <option value="2">Two</option>
50
        <option value="3">Three</option>
51
    </select>
52
    <div class="input-group-append">
53
        <button class="btn btn-outline-primary" type="button">Button</button>
54
    </div>
55
</div>
56
<!-- /input group -->
Copied!
Custom file input
Custom file input
Source Code
1
<!-- Input Group -->
2
<div class="input-group mb-3">
3
    <div class="input-group-prepend">
4
        <span class="input-group-text">Upload</span>
5
    </div>
6
    <div class="custom-file">
7
        <input type="file" class="custom-file-input" id="inputGroupFile01">
8
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
9
    </div>
10
</div>
11
<!-- /input group -->
12
​
13
<!-- Input Group -->
14
<div class="input-group mb-3">
15
    <div class="custom-file">
16
        <input type="file" class="custom-file-input" id="inputGroupFile02">
17
        <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
18
    </div>
19
    <div class="input-group-append">
20
        <span class="input-group-text">Upload</span>
21
    </div>
22
</div>
23
<!-- /input group -->
24
​
25
<!-- Input Group -->
26
<div class="input-group mb-3">
27
    <div class="input-group-prepend">
28
        <button class="btn btn-outline-primary" type="button">Button</button>
29
    </div>
30
    <div class="custom-file">
31
        <input type="file" class="custom-file-input" id="inputGroupFile03">
32
        <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
33
    </div>
34
</div>
35
<!-- /input group -->
36
​
37
<!-- Input Group -->
38
​
39
<div class="input-group">
40
    <div class="custom-file">
41
        <input type="file" class="custom-file-input" id="inputGroupFile04">
42
        <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
43
    </div>
44
    <div class="input-group-append">
45
        <button class="btn btn-outline-primary" type="button">Button</button>
46
    </div>
47
</div>
48
<!-- /input group -->
Copied!
​
Components - Previous
Dropdowns
Next - Components
Jumbotron
Last modified 1yr ago
Copy link
Contents
Basic Input Group
Sizing Input Group
Checkbox & radio Input Group
Multiple Inputs
Multiple Addons
Button Addons
Buttons with dropdowns
Segmented buttons
Custom select
Custom file input