Inputs

Most usage Bootstrap controls

  • checkbox
  • radio
  • input

Checkbox

Checkboxes are used if you want the user to select any number of options from a list of preset options.

Display Option
  • Vertical align
  • Inline

Vertical Checkbox

<form>
	<div class="checkbox">
	  <label><input type="checkbox" value="">BCA</label>
	</div>
	<div class="checkbox">
	  <label><input type="checkbox" value="">MCA</label>
	</div>
	<div class="checkbox">
	  <label><input type="checkbox" value="">BSC CS</label>
	</div>
	<div class="checkbox">
	  <label><input type="checkbox" value="">MSC CS</label>
	</div>
</form>

Inline Checkbox

<form>
	<label class="checkbox-inline">
		<input type="checkbox" value="">BCA
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" value="">MCA
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" value="">BSC CS
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" value="">MSC CS
	</label>
</form>

Radio

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

Display Option
  • Vertical align
  • Inline

Vertical Radio Button

<form>
	<div class="radio">
	  <label><input type="radio" name="gen">Male</label>
	</div>
	<div class="radio">
	  <label><input type="radio" name="gen">Female</label>
	</div>
</form>

Inline Radio Button

<form>
	<label class="radio-inline">
		<input type="radio" name="gen">Male
	</label>
	<label class="radio-inline">
		<input type="radio" name="gen">Female
	</label>
</form>

Input Groups

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

  •  .input-group-addon attaches an icon
  •  .input-group-btn attaches a button next to an input
<form>
  <div class="input-group">
	<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
	<input id="name" type="text" class="form-control" name="name" placeholder="Name">
  </div>
  <div class="input-group">
	<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
	<input id="pass" type="password" class="form-control" name="pass" placeholder="Password">
  </div>
<br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="Search">
	<div class="input-group-btn">
	  <button class="btn btn-success" type="submit">
		<i class="glyphicon glyphicon-search"></i>
	  </button>
	</div>
  </div>
</form>

Input Control States

Control Used
focus The outline of the input
Disabled This attribute to disable an input field
Readonly This attribute to an input to prevent user input
Validation States (.has-error or .has-success ) This attribute to an input to prevent user input
.has-feedback ( Icons ) You can add feedback icons
.sr-only Non-visible labels 
<form class="form-horizontal">
   <div class="form-group">
		<label for="dis" class="col-sm-2 control-label">Disabled</label>
		<div class="col-sm-10">
		  <input class="form-control" id="dis" type="text" disabled>
		</div>
	</div>
	<div class="form-group has-success has-feedback">
		<label class="col-sm-2 control-label" for="suc">
		success</label>
		<div class="col-sm-10">
		  <input type="text" class="form-control" id="suc">
		  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
		</div>
	</div>
	 <div class="form-group has-warning has-feedback">
		<label class="col-sm-2 control-label" for="war">
		warning</label>
		<div class="col-sm-10">
		  <input type="text" class="form-control" id="war">
		  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
		</div>
	  </div>
	  <div class="form-group has-error has-feedback">
		<label class="col-sm-2 control-label" for="err">
		error</label>
		<div class="col-sm-10">
		  <input type="text" class="form-control" id="err">
		  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
		</div>
	  </div>
</form>

Input Size

Set the heights of input elements using bootstrap classes

  • input-sm
  • input-lg
  • input-group-lg   - Change size all inputs and other elements inside an .input-group
  • form-group-lg   - Change size of labels and form controls within a Horizontal form
<h2 class="page-header"> Input Size</h2>
	<form>
		<div class="form-group">
		  <label>First Name </label>
			<input type="text" class="form-control input-sm" placeholder="small size">
		</div>
		<div class="form-group">
		  <label>Last Name </label>
			<input type="text" class="form-control" placeholder="Default size">
		</div>
		<div class="form-group">
		  <label>Phone Number </label>
			<input type="text" class="form-control input-lg" placeholder="Large size">
		</div>
	</form>
<h2 class="page-header">  Group Size</h2>
	<form class="form-horizontal">
		<div class="form-group form-group-lg">
		  <label class="col-sm-2 control-label" for="lg">lg</label>
		  <div class="col-sm-10">
			<input class="form-control" type="text" id="lg">
		  </div>
		</div>
		<div class="form-group form-group-sm">
		  <label class="col-sm-2 control-label" for="sm">sm</label>
		  <div class="col-sm-10">
			<input class="form-control" type="text" id="sm">
		  </div>
		</div>
		<div class="input-group input-group-lg">
		  <input type="text" class="form-control" placeholder="Search">
		  <div class="input-group-btn">
			<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
		  </div>
		</div><br><br>
		<div class="input-group input-group-sm">
		  <input type="text" class="form-control" placeholder="Search">
		  <div class="input-group-btn">
			<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
		  </div>
		</div>
	</form>

Source Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>
        hr{
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        }
    </style>
</head>
<body>
	<div class="container" style="margin-top:20px;">
		<div class="row">
			<div class="col-md-6">
				<h2 class="page-header">Checkboxs</h2>
				<div class="col-md-5">
					<form>
						<div class="checkbox">
						  <label><input type="checkbox" value="">BCA</label>
						</div>
						<div class="checkbox">
						  <label><input type="checkbox" value="">MCA</label>
						</div>
						<div class="checkbox">
						  <label><input type="checkbox" value="">BSC CS</label>
						</div>
						<div class="checkbox">
						  <label><input type="checkbox" value="">MSC CS</label>
						</div>
					</form>
				</div>
				<div class="col-md-7">
					<form>
						<label class="checkbox-inline">
							<input type="checkbox" value="">BCA
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" value="">MCA
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" value="">BSC CS
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" value="">MSC CS
						</label>
					</form>
				</div>
			</div>
			<div class="col-md-6">
			<h2 class="page-header">Radio Box</h2>
			<div class="col-md-5">
				<form>
					<div class="radio">
					  <label><input type="radio" name="gen">Male</label>
					</div>
					<div class="radio">
					  <label><input type="radio" name="gen">Female</label>
					</div>
				</form>
			</div>
			<div class="col-md-7">
				<form>
					<label class="radio-inline">
						<input type="radio" name="gen">Male
					</label>
					<label class="radio-inline">
						<input type="radio" name="gen">Female
					</label>
					
				</form>
			</div><br style="clear:both;">	
			</div>
		</div>
		<div class="col-md-6">
			<h2 class="page-header"> Input Groups</h2>
			<form>
			  <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
				<input id="name" type="text" class="form-control" name="name" placeholder="Name">
			  </div>
			  <div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
				<input id="pass" type="password" class="form-control" name="pass" placeholder="Password">
			  </div>
			<br>
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search">
				<div class="input-group-btn">
				  <button class="btn btn-success" type="submit">
					<i class="glyphicon glyphicon-search"></i>
				  </button>
				</div>
			  </div>
			</form>
		</div>
		<div class="col-md-6">
			<h2 class="page-header"> Input Control States</h2>
			<form class="form-horizontal">
			   <div class="form-group">
					<label for="dis" class="col-sm-2 control-label">Disabled</label>
					<div class="col-sm-10">
					  <input class="form-control" id="dis" type="text" disabled>
					</div>
				</div>
				<div class="form-group has-success has-feedback">
					<label class="col-sm-2 control-label" for="suc">
					success</label>
					<div class="col-sm-10">
					  <input type="text" class="form-control" id="suc">
					  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
				</div>
				 <div class="form-group has-warning has-feedback">
					<label class="col-sm-2 control-label" for="war">
					warning</label>
					<div class="col-sm-10">
					  <input type="text" class="form-control" id="war">
					  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
					</div>
				  </div>
				  <div class="form-group has-error has-feedback">
					<label class="col-sm-2 control-label" for="err">
					error</label>
					<div class="col-sm-10">
					  <input type="text" class="form-control" id="err">
					  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					</div>
				  </div>
			</form>
		</div>
		<div class="col-md-6">
			<h2 class="page-header"> Input Size</h2>
			<form>
				<div class="form-group">
				  <label>First Name </label>
					<input type="text" class="form-control input-sm" placeholder="small size">
				</div>
				<div class="form-group">
				  <label>Last Name </label>
					<input type="text" class="form-control" placeholder="Default size">
				</div>
				<div class="form-group">
				  <label>Phone Number </label>
					<input type="text" class="form-control input-lg" placeholder="Large size">
				</div>
			</form>
		</div>
		<div class="col-md-6">
		<h2 class="page-header">  Group Size</h2>
			<form class="form-horizontal">
				<div class="form-group form-group-lg">
				  <label class="col-sm-2 control-label" for="lg">lg</label>
				  <div class="col-sm-10">
					<input class="form-control" type="text" id="lg">
				  </div>
				</div>
				<div class="form-group form-group-sm">
				  <label class="col-sm-2 control-label" for="sm">sm</label>
				  <div class="col-sm-10">
					<input class="form-control" type="text" id="sm">
				  </div>
				</div>
				<div class="input-group input-group-lg">
				  <input type="text" class="form-control" placeholder="Search">
				  <div class="input-group-btn">
					<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
				  </div>
				</div><br><br>
				<div class="input-group input-group-sm">
				  <input type="text" class="form-control" placeholder="Search">
				  <div class="input-group-btn">
					<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
				  </div>
				</div>
			</form>
		</div>
	</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
To download raw file Click Here

Bootstrap Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions