How to Make Bootstrap 3 Form Inputs

In bootstrap, the form components if properly declared then it will automatically take some property inside class .form-control and the form fields are text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.


As other form fields textarea will have some default property and width 100% when its declared as class .form-control and coder can change the row and column of the textarea by declaring inside the textarea.


Checkboxes and radios:

The checkbox and radio button are also given some property in bootstrap


    <input type="checkbox" data-blogger-escaped-value="">

Option one is this and that—be sure to include why it’s great


    <input id="optionsRadios1" name="optionsRadios" type="radio" value="option1" data-blogger-escaped-checked="">

Option one is this and that—be sure to include why it’s great

as: to make a textbox or radio button disabled use the class name .disabled with the class name .checkbox or use class .disabled with class .radio on the checkbox container tag.


    <input type="checkbox" data-blogger-escaped-disabled="" data-blogger-escaped-value="">

Option two is disabled


    <input id="optionsRadios3" name="optionsRadios" type="radio" value="option3" data-blogger-escaped-disabled="">

Option three is disabled

Inline checkbox or inline radio

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Checkboxes and radios without label text

Simply Do not give any label


Give the class .form-control with a select tag or dropdown input menu.

Multiple Select

Simply give multiple attributes with the tag named select.


A label: in a from group give a label tag class name to .control-label to make a label.

Static Control:

Make a value static in a form give a class name .form-control-static to an HTML tag inside form group make it static.


<div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<div class="form-control-static">
    <p>[email protected]</p>

Focus state:

We remove the default outline styles on some form controls and apply a box-shadow in its place for focus.

Disable Status:

To make a form field disabled use the attributes disabled.


    <input id="disabledInput" class="form-control" type="text" data-blogger-escaped-disabled="" data-blogger-escaped-placeholder="Disabled input here...">

Disable Fieldset:

To make the total fieldset disabled inside an HTML tag then used disabled attributes to that HTML tag


<fieldset data-blogger-escaped-disabled="">
<div class="form-group">
    <label for="disabledTextInput">Disabled input</label>
    <input id="disabledTextInput" class="form-control" type="text" data-blogger-escaped-placeholder="Disabled input">
<div class="form-group">
    <label for="disabledSelect">Disabled select menu</label>
	<div class="checkbox">
	    <input type="checkbox"> Can’t check this</p>
<button class="btn btn-primary" type="submit">Submit</button>

Readonly state

To make a form field Readonly use the attributes read-only.


    <input class="form-control" type="text" data-blogger-escaped-placeholder="Readonly input here…" data-blogger-escaped-readonly="">

Block-level help text for form controls.

Use help-block to give some helper text inside a form-group


<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

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.


	<div class="form-group has-success">
    <label class="control-label" for="inputSuccess1">Input with success</label>
    <input id="inputSuccess1" class="form-control" type="text" data-blogger-escaped-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 class="form-group has-warning">
    <label class="control-label" for="inputWarning1">Input with warning</label>
    <input id="inputWarning1" class="form-control" type="text">
<div class="form-group has-error">
    <label class="control-label" for="inputError1">Input with error</label>
    <input id="inputError1" class="form-control" type="text">
<input id="checkboxSuccess" type="checkbox" value="option1">
<p>Checkbox with success</p>
<input id="checkboxWarning" type="checkbox" value="option1">
<p>Checkbox with warning</p>
<input id="checkboxError" type="checkbox" value="option1">
<p>Checkbox with error</p>

Form field With optional icons

We can give some bootstrap in initial and at the end of the field  and for that, we have to use glyphicon


<label class="control-label" for="inputSuccess2">Input with success</label>
<input id="inputSuccess2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputSuccess2Status">
<p><span id="inputSuccess2Status" class="sr-only">(success)</span></p>
<div class="form-group has-warning has-feedback">
	<label class="control-label" for="inputWarning2">Input with warning</label>
	<input id="inputWarning2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputWarning2Status">
<span id="inputWarning2Status" class="sr-only">(warning)</span>
<div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError2">Input with error</label>
    <input id="inputError2" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputError2Status">
<span id="inputError2Status" class="sr-only">(error)</span>
<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 id="inputGroupSuccess1" class="form-control" type="text" data-blogger-escaped-aria-describedby="inputGroupSuccess1Status">
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>

Control sizing

In form control coder can make the sizing also by giving some class as .input-lg .col-lg-* or input-sm etc.


<input class="form-control input-lg" type="text" data-blogger-escaped-placeholder=".input-lg">
<input class="form-control" type="text" data-blogger-escaped-placeholder="Default input">
<input class="form-control input-sm" type="text" data-blogger-escaped-placeholder=".input-sm">
<select class="form-control input-lg">…</select>
<select class="form-control">…</select>
<select class="form-control input-sm">…</select>

Please give your comments to make the site better. Thanks For Reading

Share The Post On -