bootstrap 5 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="button-addon2"> <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button> </div>
bootstrap 4 form 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> <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> <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> <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> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">With pre</span> </div> <pre class="form-control" aria-label="With pre"></pre> </div>
Source: getbootstrap.com
textbox with dropdown bootstrap
<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="">First and last name</span> </div> <input type="text" class="form-control"> <input type="text" class="form-control"> </div>
Source: getbootstrap.com