Elements
These modular elements can be readily used and customized across pages and in different blocks.
Input group Example <> show code
<label for="Name">User Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-addon1">
</div>
<br>
<label for="Name">To</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">@example.com</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<div class="row">
<div class="col-lg-6" style="margin-top: 20px;">
<div class="input-group">
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="Multiple inpute-group-addon elements">
</div>
</div>
<div class="col-lg-6" style="margin-top: 20px;">
<div class="input-group">
<span class="input-group-addon">
<div class="form-check ">
<input id="checkbox-2" class="checkbox-custom form-check-input" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label form-check-label "></label>
</div>
</span>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Text input with Checkbox button">
</div>
</div>
</div>
How to use
Place one add-on or button on either side of an input. You may also place one on both sides of an input. it does not support multiple form-controls in a single input group.
- Using the classes .form-control (for inputs, selects, etc) and .form-group for wrappers you can consistently style and layout forms.
- Each single element of input group uses form element property. For reference you can See here
Example
@
@example.com
@example.com
$
.00
$
0.00
$
0.00
Checkboxes and radio addons <> show code
<div class="input-group">
<span class="input-group-addon">
<div class="form-check ">
<input id="checkbox-2" class="checkbox-custom form-check-input" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label form-check-label "></label>
</div>
</span>
<input type="text" class="form-control" aria-label="Text input with checkbox button">
</div>
How to use
Place one add-on or button on either side of an input. You may also place one on both sides of an input. it does not support multiple form-controls in a single input group.
- Using the classes .form-control (for inputs, selects, etc) and .form-group for wrappers you can consistently style and layout forms.
- Each single element of input group uses from element property and same styling. For reference you can See here