In bootstrap there are some form controls which rebooted styles. Bootstrap classes are used to make a form responsive different devices.
Basic Form
<
form
>
<
div
class
="
form-group
"
>
<
label
for
="
inputEmailOne
"
>
Email address<
/label
>
<
input
type
="
"
class
="
form-control
"
id
="
innputEmailOne
"
aria-describedby
="
emailHelp
"
placeholder
="
Enter email
"
>
<
small
id
="
emailHelp
"
class
="
form-text text-muted
"
>
You email will be secure here.<
/small
>
<
/div
>
<
div
class
="
form-group
"
>
<
label
for
="
inputPasswordOne
"
>
Password<
/label>
<
input
type
="
password
"
class
="
form-control
"
id
="
inputPasswordOne
"
placeholder
="
Password
"
>
<
/div
>
<
div
class
="
form-group form-check
"
>
<
input
type
="
checkbox
"
class
="
form-check-input
"
id
="
exampleCheckOne
"
>
<
label
class
="
form-check-label
"
for
="
exampleCheckOne
"
>
Check me out<
/label>
<
/div
>
<
button
type
="
submit
"
class
="
btn btn-primary
"
>
Submit<
/button>
<
/form
>
Explanation
In this example form-group
class is used to apply
proper margins. While some types of input like checkbox
,
email
,password
and submit
are used.
Form sizing
<
input
class
="
form-control form-control-sm
"
type
="
text
"
placeholder
="
.form-control-sm
"
>
<
input
class
="
form-control
"
type
="
text
"
placeholder
="
Default input
"
>
<
input
class
="
form-control form-control-lg
"
type
="
text
"
placeholder
="
.form-control-lg
"
>
Explanation
In this example form-control-sm
class is used
to make small size input form and form-control-lg
is used to make large size input form.
Example of sizing
<
select
class
="
form-control form-control-lg
"
>
<
option
>
Large select1<
/option
>
<
option
>
Large select2<
/option
>
<
option
>
Large select3<
/option
>
<
/select
>
<
select
class
="
form-control
"
>
<
option
>
Default select1<
/option
>
<
option
>
Default select2<
/option
>
<
option
>
Default select2<
/option
>
<
/select
>
<
select
class
="
form-control form-control-sm
"
>
<
option
>
Small select1<
/option
>
<
option
>
Small select2<
/option
>
<
option
>
Small select3<
/option
>
<
/select
>
Example of Inline Form
<
form
class
="
form-inline
"
>
<
div
class
="
form-group
"
>
<
label
for
="
"
>
Email address:<
/label
>
<
input
type
="
"
class
="
form-control
"
id
="
"
>
<
/div
>
<
div
class
="
form-group
"
>
<
label
for
="
pwd
"
>
Password:<
/label
>
<
input
type
="
password
"
class
="
form-control
"
id
="
pwd
"
>
<
/div
>
<
div
class
="
checkbox
"
>
<
label
>
<
input
type
="
checkbox
"
>
Remember me<
/label
>
<
/div
>
<
button
type
="
submit
"
class
="
btn btn-primary
"
>
Submit<
/button
>
<
/form
>
Explanation
In this example form-inline
class is used
to make an inline form.
File inputs
<
form
>
<
div
class
="
form-group
"
>
<
label
for
="
exampleFormControlFileOne
"
>
Example file input<
/label
>
<
input
type
="
file
"
class
="
form-control-file
"
id
="
exampleFormControlFileOne
"
>
<
/div
>
<
/form
>
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.