Boostrap input

Input with bootstrap

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control">
    <small id="emailHelp" class="form-text text-muted">Hello, World</small>
  </div>
 </form>

Bootstrap form input select

<div class="col-lg-6 col-md-6 col-12">
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <select class="form-control select2bs4" name="country_code" id="country_code" style="width: 100%">
        <option value="+91">+91</option>
        <option value="+351">+351</option>
        <option value="+1">+1</option>
      </select>
    </div>
    	<input type="text" name="user" class="form-control" placeholder="Email Or Mobile Number">
    </div>
</div>

Boostrap input

<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

Bootstrap input tagsinput

<select multiple data-role="tagsinput">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Washington">Washington</option>
  <option value="Sydney">Sydney</option>
  <option value="Beijing">Beijing</option>
  <option value="Cairo">Cairo</option>
</select>

Source: bootstrap-tagsinput.github.io

Bootstrap input

<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

Details with input bootstrap

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Source: uh.edu

Similar codes

0 vote274 views2 answers
Css how to place an icon on a photo
Html
2 votes265 views1 answer
Twig count array
Html
1 vote280 views1 answer
Description list html
Html
9 votes301 views3 answers
Bootstrap class align center image
Html
14 votes259 views2 answers
How to display entered text when a button is clicked in html
Html
1 vote268 views1 answer
Birthday wishes using html code
Html
4 votes255 views1 answer
Portfolio templates html
Html
15 votes268 views6 answers
Html code
Html
2 votes276 views1 answer
Action button dropdown
Html
0 vote295 views1 answer
Html post doesn't work
Html