<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">@</span></div><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"><div class="input-group-append"><span class="input-group-text" id="basic-addon2">@example.com</span></div></div><!-- /input group -->​<!-- Input Group --><label for="basic-url">Your vanity URL</label><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">https://example.com/users/</span></div><input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">$</span></div><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"><div class="input-group-append"><span class="input-group-text">.00</span></div></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><div class="input-group-prepend"><span class="input-group-text">With textarea</span></div><textarea class="form-control" aria-label="With textarea"></textarea></div><!-- /input group -->
<!-- Input Group --><div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Small</span></div><input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default">Default</span></div><input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div><!-- /input group -->​<!-- Input Group --><div class="input-group input-group-lg"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-lg">Large</span></div><input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" aria-label="Text input with checkbox"></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><div class="input-group-prepend"><div class="input-group-text"><input type="radio" aria-label="Radio button for following text input"></div></div><input type="text" class="form-control" aria-label="Text input with radio button"></div><!-- /input group -->
<!-- Input Group --><div class="input-group"><div class="input-group-prepend"><span class="input-group-text">First and last name</span></div><input type="text" class="form-control"><input type="text" class="form-control"></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"><div class="input-group-append"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button class="btn btn-outline-primary" type="button">Button</button></div><input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"><div class="input-group-append"><button class="btn btn-outline-primary" type="button">Button</button></div></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button class="btn btn-outline-primary" type="button">Button</button><button class="btn btn-outline-primary" type="button">Button</button></div><input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"><div class="input-group-append"><button class="btn btn-outline-primary" type="button">Button</button><button class="btn btn-outline-primary" type="button">Button</button></div></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>​<!-- Dropdown Menu --><div class="dropdown-menu"><a class="dropdown-item" href="javascript:void(0)">Action</a><a class="dropdown-item" href="javascript:void(0)">Another action</a><a class="dropdown-item" href="javascript:void(0)">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="javascript:void(0)">Separated link</a></div><!-- /dropdown menu -->​</div><input type="text" class="form-control" aria-label="Text input with dropdown button"></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><input type="text" class="form-control" aria-label="Text input with dropdown button"><div class="input-group-append"><button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>​<!-- Dropdown Menu --><div class="dropdown-menu"><a class="dropdown-item" href="javascript:void(0)">Action</a><a class="dropdown-item" href="javascript:void(0)">Another action</a><a class="dropdown-item" href="javascript:void(0)">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="javascript:void(0)">Separated link</a></div><!-- /dropdown menu -->​</div></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button type="button" class="btn btn-outline-primary">Action</button><button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>​<!-- Dropdown Menu --><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div><!-- /dropdown menu -->​</div><input type="text" class="form-control" aria-label="Text input with segmented dropdown button"></div><!-- /input group -->​<!-- Input Group --><div class="input-group"><input type="text" class="form-control" aria-label="Text input with segmented dropdown button"><div class="input-group-append"><button type="button" class="btn btn-outline-primary">Action</button><button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>​<!-- Dropdown Menu --><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div role="separator" class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div><!-- /dropdown menu -->​</div></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><label class="input-group-text" for="inputGroupSelect01">Options</label></div><select class="custom-select" id="inputGroupSelect01"><option selected="">Choose...</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><select class="custom-select" id="inputGroupSelect02"><option selected="">Choose...</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select><div class="input-group-append"><label class="input-group-text" for="inputGroupSelect02">Options</label></div></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button class="btn btn-outline-primary" type="button">Button</button></div><select class="custom-select" id="inputGroupSelect03"><option selected="">Choose...</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div><!-- /input group -->​<!-- Input Group -->​<div class="input-group"><select class="custom-select" id="inputGroupSelect04"><option selected="">Choose...</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select><div class="input-group-append"><button class="btn btn-outline-primary" type="button">Button</button></div></div><!-- /input group -->
<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">Upload</span></div><div class="custom-file"><input type="file" class="custom-file-input" id="inputGroupFile01"><label class="custom-file-label" for="inputGroupFile01">Choose file</label></div></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="custom-file"><input type="file" class="custom-file-input" id="inputGroupFile02"><label class="custom-file-label" for="inputGroupFile02">Choose file</label></div><div class="input-group-append"><span class="input-group-text">Upload</span></div></div><!-- /input group -->​<!-- Input Group --><div class="input-group mb-3"><div class="input-group-prepend"><button class="btn btn-outline-primary" type="button">Button</button></div><div class="custom-file"><input type="file" class="custom-file-input" id="inputGroupFile03"><label class="custom-file-label" for="inputGroupFile03">Choose file</label></div></div><!-- /input group -->​<!-- Input Group -->​<div class="input-group"><div class="custom-file"><input type="file" class="custom-file-input" id="inputGroupFile04"><label class="custom-file-label" for="inputGroupFile04">Choose file</label></div><div class="input-group-append"><button class="btn btn-outline-primary" type="button">Button</button></div></div><!-- /input group -->
​