Elements

  1. Home
  2. Components

	<form >
		<div class="row">
			<div class="form-group col-md-6">
			  <input type="text" class="form-control" id="exampleInputName" aria-describedby="userName" placeholder="Enter email">
			</div>
			<div class="form-group col-md-6">
			  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
			</div>
			<div class="form-group col-md-12">
			  <input type="number" class="form-control" id="exampleInputPhone" placeholder="Phone">
			</div>
			<div class="form-group col-md-12">
			   <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Your message"></textarea>
			</div>
		</div>
		<button type="submit" class="btn btn-default btn-primary">Send message</button>
	</form>
How to use
  • Use .form-control (for inputs, selects, etc) and .form-group for wrappers for style and layout forms.

Example: 


	<form >
		<div class="form-group row">
			<label for="example-text-input" class="col-md-2 col-form-label">Name of Card</label>
			<div class="col-md-10">
				<input class="form-control" type="text" placeholder="Name of Card">
			</div>
		</div>
		<div class="form-group row">
			<label for="example-search-input" class="col-md-2 col-form-label">Card Number</label>
			<div class="col-md-10">
				<input class="form-control" type="text" placeholder="#### . #### . ####">
			</div>
		</div>
		<div class="form-group row">
			<label for="example-datetime-local-input" class="col-md-2 col-form-label">Expires On</label>
			<div class="col-md-10">
				<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
			</div>
		</div>
		<div class="form-group row">
			<label for="example-password-input" class="col-md-2 col-form-label">Security code</label>
			<div class="col-md-10">
				<input class="form-control" type="text" value="CVC" placeholder="CVC">
				<i class="fa fa-question-circle helpText" aria-hidden="true"></i>
			</div>
		</div>
		<div class="form-group row">
			<label for="example-location" class="col-md-2 col-form-label">Country</label>
			<div class="col-md-10 selectOptions ">
				<select name="country" class="form-control select-drop">
					<option>Select Country</option>
					<option>countryname</option>
					<option>countryname</option>
					<option>countryname</option>
				</select>
			</div>
		</div>
		<div class="form-group row">
			<label for="example-postal-code" class="col-md-2 col-form-label">Postal code</label>
			<div class="col-md-10">
				<input class="form-control" type="text" placeholder="Postal code">
			</div>
		</div>
		<div class="row">
			<div class="col-md-10 offset-md-1">
				<div class="form-check ">
					<input id="checkbox-1" class="checkbox-custom form-check-input" name="checkbox-1" type="checkbox" checked>
					<label for="checkbox-1" class="checkbox-custom-label form-check-label">Remember this card</label>

				</div>
				<button class="btn btn-primary btn-default card-btn" type="submit">use this card</button>
			</div>
		</div>
	</form>
How to use
  • These are some bootstrap basic form elements using boostrap default classes
  • Select box designed using Jquery-selectmox Plugin
  • To call the selectbox from your main js file copy the following code to your javascript file. 
    
	$('.classname').selectbox();

Example

or 

	<!-- Default Checked -->
	<div class="form-check ">
		<input id="checkbox-1" class="checkbox-custom form-check-input" name="checkbox-1" type="checkbox" checked>
		<label for="checkbox-1" class="checkbox-custom-label form-check-label default-checked">Default Checked</label>
	</div>

	<!-- Unchecked -->
	<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 ">Unchecked</label>
	</div>

	<!-- Checked -->
	<div class="form-check ">
		<input id="checkbox-3" class="checkbox-custom form-check-input" name="checkbox-3" type="checkbox" checked>
		<label for="checkbox-3" class="checkbox-custom-label form-check-label">Checked</label>
	</div>

	<!-- Disabled unchecked -->
	<div class="form-check ">
		<input id="checkbox-4" class="checkbox-custom form-check-input" name="checkbox-4" type="checkbox" disabled>
		<label for="checkbox-4" class="checkbox-custom-label form-check-label">Disabled unchecked</label>
	</div>

	<!-- Disabled Checked -->
	<div class="form-check ">
		<input id="checkbox-5" class="checkbox-custom form-check-input" name="checkbox-5" type="checkbox" checked disabled>
		<label for="checkbox-5" class="checkbox-custom-label form-check-label disable-checked">Disabled Checked</label>
	</div>
how to use
  • Use .checkbox-custom with checkbox type <input> element
  • use <label> element after <input> and give the class .checkbox-custom-label

Example


	<!-- Default Checked radio -->
	<div class="form-check ">
		<input id="radio-1" class="radio-custom form-check-input" name="radio-group" type="radio" checked>
		<label for="radio-1" class="radio-custom-label form-check-label default-checked">Default Checked</label>
	</div>

	<!-- Unchecked radio -->
	<div class="form-check ">
		<input id="radio-2" class="radio-custom form-check-input" name="radio-2" type="radio">
		<label for="radio-2" class="radio-custom-label form-check-label ">Unchecked</label>
	</div>

	<!-- Checked radio -->
	<div class="form-check ">
		<input id="radio-3" class="radio-custom form-check-input" name="radio-3" type="radio" checked>
		<label for="radio-3" class="radio-custom-label form-check-label">Checked</label>
	</div>

	<!-- Disabled unchecke radio -->
	<div class="form-check ">
		<input id="radio-4" class="radio-custom form-check-input" name="radio-4" type="radio" disabled>
		<label for="radio-4" class="radio-custom-label form-check-label">Disabled unchecked</label>
	</div>

	<!-- Disabled Checked radio -->
	<div class="form-check ">
		<input id="radio-5" class="radio-custom form-check-input" name="radio-5" type="radio" checked disabled>
		<label for="radio-5" class="radio-custom-label form-check-label disable-checked">Disabled Checked</label>
	</div>
how to use
  • Use .radio-custom with radio type <input> element
  • use <label> element after <input> and give the class .radio-custom-label

Example


	<form  class="register">
		<div class="row">
			<div class="form-group col-md-12">
				<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email">
			</div>
			<div class="form-group col-md-12">
				<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
			</div>
		</div>
		<button type="submit" class="btn btn-default btn-primary w-100">Log In</button>
		<div class="row">
			<div class="form-check col-md-6">
				<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 ">Remember me</label>
			</div>
			<div class="col-md-3 offset-md-3 text-right">
				<a href="" class="btn-link">Forgot password ?</a>
			</div>
		</div>
		<span class="or text-center">OR</span>
		<button type="submit" class="btn btn-default btn-facebook text-white w-100">Log in with Facebook</button>
		<button type="submit" class="btn btn-default btn-twitter text-white w-100">Log in with Twitter</button>
	</form>
	<p class="form-footer">Don’t have an Account? Sign up


	<!-- icon in the input field -->
	<div class="form-group col-md-12 input-icon">
	  <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email">
	</div>
how to use
  • The both Login and signup form created using basic form style. You need to do is to specify .register class with .form element
  • If you want to use icon in the input field you have to use a .input-icon with .form-group

Example

Log in your Account

Forgot password ?
OR

Don’t have an Account? Sign up

Sign Up Form

Forgot password ?
OR

Already have an Account? Log in


	<form class="form-inline">
		<label class="sr-only" for="uname">Username</label>
		<div class="input-group mb-2 mr-sm-2 mb-sm-0 input-icon">
			<div class="input-group-addon"><i class="fa fa-user"></i></div>
			<input type="text" class="form-control" id="uname" placeholder="Username">
		</div>
		<label class="sr-only" for="email">email</label>
		<div class="input-group mb-2 mr-sm-2 mb-sm-0 input-icon">
			<div class="input-group-addon"><i class="fa fa-envelope"></i></div>
			<input type="email" class="form-control" id="email" placeholder="Email">
		</div>
		<button type="submit" class="btn btn-primary btn-lg">Subscribe</button>
	</form>
How to use
  • Use .form-inline with form element
  • wrap input element into .input-group

Example



	<!-- Valid Field -->
	

	  
	  
	


	<!-- Invalid Field -->
	

	  
	  
	  

	    Please provide a valid state.
How to use
  • Validation states help give users an instance visual feedback. class .is-valid uses for valid input field and use .is-invalid for invalid field

Example

Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Accessories
BRANDS
Accessories
Get in Touch

© Copyright Bigbag Store Bootstrap Template by Abdus.