Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<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
$

	<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