raajrani.com

Bootstrap Home

Getting Started

File Structure

BOOTSTRAP CSS

Grid System

Bootstrap Typography

Bootstrap Code

Bootstrap Table

Bootstrap Forms

Bootstrap Input

Bootstrap Button

Bootstrap Images

COMPONENTS

Bootstrap Glyphicons

BS Glyphicon List

Bootstrap Alert

Bootstrap Badges

Bootstrap Breadcrumb

Bootstrap Cards
Bootstrap Input

Bootstrap Input supported al HTML5 Input type like input, textarea, checkbox, radio, select.


Bootstrap support most common HTML form control, text-based input fields like text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.


Inputs

Input type Text

<input type="text" class="form-control" placeholder="Text input">


Input type Password

<input type="password" class="form-control" placeholder="Password input">

Input type Radio
<input type="radio" class="form-control" value="1"> Input Radio
Input Radio

Input type Checkbox
<input type="checkbox" class="form-control" value="1"> Input Checkbox
Input Checkbox

Inline checkboxes and radios

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<label class="checkbox-inline">
	  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
	</label>
	<label class="checkbox-inline">
	  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
	</label>
	<label class="checkbox-inline">
	  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
	</label>
	<label class="radio-inline">
	  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
	</label>
	<label class="radio-inline">
	  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
	</label>
	<label class="radio-inline">
	  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
	</label>
</body>
</html>


Selects

Note that many native select menus—namely in Safari, Chrome have rounded corners that can't be modified via border-radius properties.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select class="form-control">
	  <option>1</option>
	  <option>2</option>
	  <option>3</option>
	  <option>4</option>
	  <option>5</option>
	</select>
</body>
</html>

.
Select with multiple attributes. 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select multiple class="form-control">
	  <option>1</option>
	  <option>2</option>
	  <option>3</option>
	  <option>4</option>
	  <option>5</option>
	</select>
</body>
</html>


Bootstrap form Static control

When need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form class="form-horizontal">
	  <div class="form-group">
	    <label class="col-sm-2 control-label">Email</label>
	    <div class="col-sm-10">
	      <p class="form-control-static">email@example.com</p>
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="password4" class="col-sm-2 control-label">Password</label>
	    <div class="col-sm-10">
	      <input type="password" class="form-control" id="password4" placeholder="Password">
	    </div>
	  </div>
	</form>
</body>
</html>

email@example.com



Bootstrap input Disabled state

Add the disabled attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input class="form-control" id="disable" type="text" placeholder="Disabled input here..." disabled>
</body>
</html>


Bootstrap input Readonly state

Add the readonly attribute for an input to prevent modification of the input value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</body>
</html>



Bootstrap Input Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="form-group has-success">
	  <label class="control-label" for="inputSuccess1">Input with success</label>
	  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
	  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
	</div>
	<div class="form-group has-warning">
	  <label class="control-label" for="inputWarning1">Input with warning</label>
	  <input type="text" class="form-control" id="inputWarning1">
	</div>
	<div class="form-group has-error">
	  <label class="control-label" for="inputError1">Input with error</label>
	  <input type="text" class="form-control" id="inputError1">
	</div>
	<div class="has-success">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxSuccess" value="option1">
	      Checkbox with success
	    </label>
	  </div>
	</div>
	<div class="has-warning">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxWarning" value="option1">
	      Checkbox with warning
	    </label>
	  </div>
	</div>
	<div class="has-error">
	  <div class="checkbox">
	    <label>
	      <input type="checkbox" id="checkboxError" value="option1">
	      Checkbox with error
	    </label>
	  </div>
	</div>
</body>
</html>


Bootstrap Input with Icon

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="form-group has-success has-feedback">
	  <label class="control-label" for="inputSuccess2">Input with success</label>
	  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <span id="inputSuccess2Status" class="sr-only">(success)</span>
	</div>
	<div class="form-group has-warning has-feedback">
	  <label class="control-label" for="inputWarning2">Input with warning</label>
	  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
	  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
	  <span id="inputWarning2Status" class="sr-only">(warning)</span>
	</div>
	<div class="form-group has-error has-feedback">
	  <label class="control-label" for="inputError2">Input with error</label>
	  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
	  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
	  <span id="inputError2Status" class="sr-only">(error)</span>
	</div>
	<div class="form-group has-success has-feedback">
	  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
	  <div class="input-group">
	    <span class="input-group-addon">@</span>
	    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
	  </div>
	  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
	</div>
</body>
</html>
(success)
(warning)
(error)
@
(success)


Optional icons form with horizontal and inline forms

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form class="form-horizontal">
	  <div class="form-group has-success has-feedback">
	    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
	    <div class="col-sm-9">
	      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
	      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	      <span id="inputSuccess3Status" class="sr-only">(success)</span>
	    </div>
	  </div>
	  <div class="form-group has-success has-feedback">
	    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
	    <div class="col-sm-9">
	      <div class="input-group">
	        <span class="input-group-addon">@</span>
	        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
	      </div>
	      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
	    </div>
	  </div>
	</form>
</body>
</html>


Bootstrap Input Control sizing 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input class="form-control input-lg" type="text" placeholder=".input-lg">
	<input class="form-control" type="text" placeholder="Default input">
	<input class="form-control input-sm" type="text" placeholder=".input-sm">
	<select class="form-control input-lg">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
	<select class="form-control input-lg">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
	<select class="form-control input-sm">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
</body>
</html>





Learn HTML

Learn CSS

Learn JS

Learn PHP

Learn ASP

Learn SQL

Learn MySQL

Learn Bootstrap

Learn WP

Learn AJAX

Learn Tools

Learn ANGULAR JS

Learn SEO

Learn Earning

Learn HOW TO

Learn CodeIgniter