1<div class="input-group mb-3">
2 <div class="input-group-prepend">
3 <span class="input-group-text" id="basic-addon1">@</span>
4 </div>
5 <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
6</div>
7
8<div class="input-group mb-3">
9 <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
10 <div class="input-group-append">
11 <span class="input-group-text" id="basic-addon2">@example.com</span>
12 </div>
13</div>
14
15<label for="basic-url">Your vanity URL</label>
16<div class="input-group mb-3">
17 <div class="input-group-prepend">
18 <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
19 </div>
20 <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
21</div>
22
23<div class="input-group mb-3">
24 <div class="input-group-prepend">
25 <span class="input-group-text">$</span>
26 </div>
27 <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
28 <div class="input-group-append">
29 <span class="input-group-text">.00</span>
30 </div>
31</div>
32
33<div class="input-group">
34 <div class="input-group-prepend">
35 <span class="input-group-text">With textarea</span>
36 </div>
37 <textarea class="form-control" aria-label="With textarea"></textarea>
38</div>