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 textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Source: getbootstrap.com

Similar codes

0 vote307 views1 answer
How to show code with html
Html
19 votes350 views3 answers
Picsum random photos
Html
0 vote308 views1 answer
How to change mouse into hand icon when you hover over something in html
Html
0 vote330 views1 answer
Procent in html
Html
0 vote378 views1 answer
Html exemple
Html
1 vote333 views1 answer
Pass method jsf component
Html
0 vote318 views1 answer
Jsf c:set date
Html
2 votes323 views1 answer
How to pass two values in one html.actionlink
Html
0 vote339 views1 answer
Favicon specification
Html
0 vote415 views1 answer
Coreui dropdown
Html