input groupbootstrpa code example
Example 1: input button group
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"><i class="fa fa-right-arrow"></i></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" 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">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<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-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Example 2: input groups
<form role="form" class="form-horizontal">
<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-small">Small</label>
<div class="col-sm-10">
<input type="text" id="example-input-small" name="example-input-small"
class="form-control form-control-sm" placeholder=".input-sm">
</div>
</div>
<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-normal">Normal</label>
<div class="col-sm-10">
<input type="text" id="example-input-normal" name="example-input-normal"
class="form-control" placeholder="Normal">
</div>
</div>
<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-large">Large</label>
<div class="col-sm-10">
<input type="text" id="example-input-large" name="example-input-large"
class="form-control form-control-lg" placeholder=".input-lg">
</div>
</div>
<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Grid Sizes</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
</div>
<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Static</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Dropdowns</label>
<div class="col-sm-10">
<div class="input-group mb-3">
<button class="btn btn-primary dropdown-toggle" type="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</button>
<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>
<input type="text" class="form-control" placeholder="" aria-label=""
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="mb-15 row mb-0">
<label class="col-sm-2 col-form-label">Buttons</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="btn btn-dark" type="button">Button</button>
</div>
</div>
</div>
</form>