Input group
Copy
<div class="input-group"><span class="input-group-text" id="basic-addon1">@</span><input type="text" class="form-control" placeholder="Designing World" aria-label="Username" aria-describedby="basic-addon1"></div><div class="input-group"><input type="text" class="form-control" placeholder="care.designingworld" aria-label="Recipient's username" aria-describedby="basic-addon2"><span class="input-group-text" id="basic-addon2">@gmail.com</span></div><label for="basic-url" class="form-label">Your profile URL</label><div class="input-group"><span class="input-group-text" id="basic-addon3">themeforest.net/user/</span><input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="designing-world"></div><div class="input-group"><span class="input-group-text">Price</span><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="24"><span class="input-group-text">.00 $</span></div><div class="input-group"><div class="input-group-text"><input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input"></div><input type="text" class="form-control" aria-label="Text input with checkbox" placeholder="Checkbox"></div><div class="input-group"><div class="input-group-text"><input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input"></div><input type="text" class="form-control" aria-label="Text input with radio button" placeholder="Radio"></div><div class="input-group"><span class="input-group-text">Name</span><input type="text" aria-label="First name" class="form-control" placeholder="First name"><input type="text" aria-label="Last name" class="form-control" placeholder="Last name"></div><div class="input-group"><button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Separated link</a></li></ul><input type="text" class="form-control" aria-label="Text input with dropdown button"></div><div class="input-group"><span class="input-group-text">Your message</span><textarea class="form-control" aria-label="With textarea" placeholder="Hello Designing World!"></textarea></div>