{"id":8761,"date":"2015-12-07T16:15:12","date_gmt":"2015-12-07T14:15:12","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=8761"},"modified":"2018-01-08T13:27:22","modified_gmt":"2018-01-08T11:27:22","slug":"bootstrap-form-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/","title":{"rendered":"Bootstrap Form Example"},"content":{"rendered":"

The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data that is sent to a server for processing.<\/p>\n

Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.<\/p>\n

Bootstrap, just like other front-end frameworks, gives forms extra styling to enhance design and user experience while using them. Here, we’ll have a look at different variations of forms (meaning several input types from which a form is made up) and the necessary syntax to achieve this in Bootstrap.
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n

1. Project Folder Setup<\/h2>\n

The following requirements are necessary to be present in order to continue.<\/p>\n

1.1 Folder Structure<\/h3>\n

After downloading Bootstrap and creating a new empty HTML document, make sure you have the folder structure like this:<\/p>\n

\"form-1\"<\/a><\/p>\n

1.2 HTML Document<\/h3>\n

Your HTML file should have all Bootstrap links and libraries needed, and the syntax shall basically look like this:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Bootstrap Form Example<\/title>\r\n\r\n    <!-- Bootstrap -->\r\n    <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n  <\/head>\r\n  <body>\r\n\r\n    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n    <!-- Include all compiled plugins (below), or include individual files as needed -->\r\n    <script src=\"js\/bootstrap.min.js\"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
2. Basic Example<\/h2>\n
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group<\/code> for optimum spacing. So a basic first example would be:<\/p>\n
\r\n  <form>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputEmail1\">Email address<\/label>\r\n    <input type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" placeholder=\"Email\">\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputPassword1\">Password<\/label>\r\n    <input type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\" placeholder=\"Password\">\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputFile\">File input<\/label>\r\n    <input type=\"file\" id=\"exampleInputFile\">\r\n    <p class=\"help-block\">Example block-level help text here.<\/p>\r\n  <\/div>\r\n  <div class=\"checkbox\">\r\n    <label>\r\n      <input type=\"checkbox\"> Check me out\r\n    <\/label>\r\n  <\/div>\r\n  <button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\r\n<\/form>\r\n<\/pre>\n
What you’d see in the browser is:<\/p>\n
\"form-2\"<\/a><\/p>\n
3. Cases and Examples<\/h2>\n
The following section gives examples of Bootstrap’s varius form elements.<\/p>\n
3.1 Inline Form<\/h3>\n
Add .form-inline<\/code> to your form (which doesn’t have to be a <form>) for left-aligned and inline-block controls.<\/p>\n
\r\n<form class=\"form-inline\">\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputName2\">Name<\/label>\r\n    <input type=\"text\" class=\"form-control\" id=\"exampleInputName2\" placeholder=\"Name Here\">\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"exampleInputEmail2\">Email<\/label>\r\n    <input type=\"email\" class=\"form-control\" id=\"exampleInputEmail2\" placeholder=\"name@example.com\">\r\n  <\/div>\r\n  <button type=\"submit\" class=\"btn btn-default\">Send invitation<\/button>\r\n<\/form>\r\n<\/pre>\n
This would produce the following result in the browser window:<\/p>\n
\"form-3\"<\/a><\/p>\n
3.2 Horizontal Form<\/h3>\n
Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal<\/code> to the form (which doesn’t have to be a <form>). Doing so changes .form-groups<\/code> to behave as grid rows, so no need for .row<\/code>.<\/p>\n
\r\n<form class=\"form-horizontal\">\r\n  <div class=\"form-group\">\r\n    <label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email<\/label>\r\n    <div class=\"col-sm-10\">\r\n      <input type=\"email\" class=\"form-control\" id=\"inputEmail3\" placeholder=\"Email\">\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"inputPassword3\" class=\"col-sm-2 control-label\">Password<\/label>\r\n    <div class=\"col-sm-10\">\r\n      <input type=\"password\" class=\"form-control\" id=\"inputPassword3\" placeholder=\"Password\">\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <div class=\"col-sm-offset-2 col-sm-10\">\r\n      <div class=\"checkbox\">\r\n        <label>\r\n          <input type=\"checkbox\"> Remember me\r\n        <\/label>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <div class=\"col-sm-offset-2 col-sm-10\">\r\n      <button type=\"submit\" class=\"btn btn-default\">Sign in<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/form>\r\n<\/pre>\n
\"form-4\"<\/a><\/p>\n
3.3 Supported Controls<\/h3>\n
Examples of standard form controls supported in an example form layout.<\/p>\n
Inputs<\/strong><\/h4>\n
Most common form control, text-based input fields. Includes support for all HTML5 types: text<\/code>, password<\/code>, datetime<\/code>, datetime-local<\/code>, date<\/code>, month<\/code>, time<\/code>, week<\/code>, number<\/code>, email<\/code>, url<\/code>, search<\/code>, tel<\/code>, and color<\/code>.<\/p>\n
\r\n<!-- <input type=\"text\" class=\"form-control\" placeholder=\"Text input\">\r\n<\/pre>\n
Textarea<\/strong><\/h4>\n
Form control which supports multiple lines of text. Change rows<\/code> attribute as necessary.<\/p>\n
\r\n<textarea class=\"form-control\" placeholder=\"Textarea\" rows=\"3\"><\/textarea> -->\r\n<\/pre>\n
These two elements look like this:<\/p>\n
\"form-5\"<\/a><\/p>\n
Checkboxes and Radios<\/strong><\/h4>\n
\r\n<div class=\"checkbox\">\r\n  <label>\r\n    <input type=\"checkbox\" value=\"\">\r\n    Option one is this and that—be sure to include why it's great\r\n  <\/label>\r\n<\/div>\r\n<div class=\"checkbox disabled\">\r\n  <label>\r\n    <input type=\"checkbox\" value=\"\" disabled>\r\n    Option two is disabled\r\n  <\/label>\r\n<\/div>\r\n\r\n<div class=\"radio\">\r\n  <label>\r\n    <input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios1\" value=\"option1\" checked>\r\n    Option one is this and that—be sure to include why it's great\r\n  <\/label>\r\n<\/div>\r\n<div class=\"radio\">\r\n  <label>\r\n    <input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios2\" value=\"option2\">\r\n    Option two can be something else and selecting it will deselect option one\r\n  <\/label>\r\n<\/div>\r\n<div class=\"radio disabled\">\r\n  <label>\r\n    <input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios3\" value=\"option3\" disabled>\r\n    Option three is disabled\r\n  <\/label>\r\n<\/div>\r\n<\/pre>\n
\"form-6\"<\/a><\/p>\n
Inline checkboxes and radios<\/strong><\/h4>\n
Use the .checkbox-inline<\/code> or .radio-inline<\/code> classes on a series of checkboxes or radios for controls that appear on the same line.<\/p>\n
\r\n<label class=\"checkbox-inline\">\r\n  <input type=\"checkbox\" id=\"inlineCheckbox1\" value=\"option1\"> 1\r\n<\/label>\r\n<label class=\"checkbox-inline\">\r\n  <input type=\"checkbox\" id=\"inlineCheckbox2\" value=\"option2\"> 2\r\n<\/label>\r\n<label class=\"checkbox-inline\">\r\n  <input type=\"checkbox\" id=\"inlineCheckbox3\" value=\"option3\"> 3\r\n<\/label>\r\n<br\/><br\/>\r\n<label class=\"radio-inline\">\r\n  <input type=\"radio\" name=\"inlineRadioOptions\" id=\"inlineRadio1\" value=\"option1\"> 1\r\n<\/label>\r\n<label class=\"radio-inline\">\r\n  <input type=\"radio\" name=\"inlineRadioOptions\" id=\"inlineRadio2\" value=\"option2\"> 2\r\n<\/label>\r\n<label class=\"radio-inline\">\r\n  <input type=\"radio\" name=\"inlineRadioOptions\" id=\"inlineRadio3\" value=\"option3\"> 3\r\n<\/label>\r\n<\/pre>\n
\"form-7\"<\/a><\/p>\n
Selects<\/strong><\/h4>\n
Note that many native select menus\u2014namely in Safari and Chrome\u2014have rounded corners that cannot be modified via border-radius<\/code> properties.<\/p>\n
\r\n<select class=\"form-control\">\r\n  <option>1<\/option>\r\n  <option>2<\/option>\r\n  <option>3<\/option>\r\n  <option>4<\/option>\r\n  <option>5<\/option>\r\n<\/select>\r\n\r\n<select multiple class=\"form-control\">\r\n  <option>1<\/option>\r\n  <option>2<\/option>\r\n  <option>3<\/option>\r\n  <option>4<\/option>\r\n  <option>5<\/option>\r\n<\/select>\r\n<\/pre>\n
\"form-8\"<\/a><\/p>\n
3.4 Static Control<\/h3>\n
When you need to place plain text next to a form label within a form, use the .form-control-static<\/code> class on a <p><\/code>.<\/p>\n
\r\n<form class=\"form-horizontal\">\r\n  <div class=\"form-group\">\r\n    <label class=\"col-sm-2 control-label\">Email<\/label>\r\n    <div class=\"col-sm-10\">\r\n      <p class=\"form-control-static\">email@example.com<\/p>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"form-group\">\r\n    <label for=\"inputPassword\" class=\"col-sm-2 control-label\">Password<\/label>\r\n    <div class=\"col-sm-10\">\r\n      <input type=\"password\" class=\"form-control\" id=\"inputPassword\" placeholder=\"Password\">\r\n    <\/div>\r\n  <\/div>\r\n<\/form>\r\n<\/pre>\n
\"form-9\"<\/a><\/p>\n
3.5 Readonly State<\/h3>\n
Add the readonly<\/code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor:<\/p>\n
\r\n<input class=\"form-control\" type=\"text\" placeholder=\"Readonly input here\u2026\" readonly>\r\n<\/pre>\n
\"form-10\"<\/a><\/p>\n
3.6 Validation States<\/h3>\n
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning<\/code>, .has-error<\/code>, or .has-success<\/code> to the parent element. Any .control-label<\/code>, .form-control<\/code>, and .help-block<\/code> within that element will receive the validation styles.<\/p>\n
\r\n<div class=\"form-group has-success has-feedback\">\r\n  <label class=\"control-label\" for=\"inputSuccess2\">Input with success<\/label>\r\n  <input type=\"text\" class=\"form-control\" id=\"inputSuccess2\" aria-describedby=\"inputSuccess2Status\">\r\n  <span class=\"glyphicon glyphicon-ok form-control-feedback\" aria-hidden=\"true\"><\/span>\r\n  <span id=\"inputSuccess2Status\" class=\"sr-only\">(success)<\/span>\r\n<\/div>\r\n<div class=\"form-group has-warning has-feedback\">\r\n  <label class=\"control-label\" for=\"inputWarning2\">Input with warning<\/label>\r\n  <input type=\"text\" class=\"form-control\" id=\"inputWarning2\" aria-describedby=\"inputWarning2Status\">\r\n  <span class=\"glyphicon glyphicon-warning-sign form-control-feedback\" aria-hidden=\"true\"><\/span>\r\n  <span id=\"inputWarning2Status\" class=\"sr-only\">(warning)<\/span>\r\n<\/div>\r\n<div class=\"form-group has-error has-feedback\">\r\n  <label class=\"control-label\" for=\"inputError2\">Input with error<\/label>\r\n  <input type=\"text\" class=\"form-control\" id=\"inputError2\" aria-describedby=\"inputError2Status\">\r\n  <span class=\"glyphicon glyphicon-remove form-control-feedback\" aria-hidden=\"true\"><\/span>\r\n  <span id=\"inputError2Status\" class=\"sr-only\">(error)<\/span>\r\n<\/div>\r\n<div class=\"form-group has-success has-feedback\">\r\n  <label class=\"control-label\" for=\"inputGroupSuccess1\">Input group with success<\/label>\r\n  <div class=\"input-group\">\r\n    <span class=\"input-group-addon\">@<\/span>\r\n    <input type=\"text\" class=\"form-control\" id=\"inputGroupSuccess1\" aria-describedby=\"inputGroupSuccess1Status\">\r\n  <\/div>\r\n  <span class=\"glyphicon glyphicon-ok form-control-feedback\" aria-hidden=\"true\"><\/span>\r\n  <span id=\"inputGroupSuccess1Status\" class=\"sr-only\">(success)<\/span>\r\n<\/pre>\n
\"form-11\"<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, forms are important HTML elements (but not only) which are given a lot of styles by Bootstrap. Forms and their various elements have a default size (i.e. width and height). If you want a smaller or bigger size, include respective classes .input-sm<\/code> and .input-lg<\/code> to change the size. Forms can also be customized in a few other ways not mentioned here, but you can find these (and a lot more) in the official Bootstrap site.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: Boostrap Form Example<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using …<\/p>\n","protected":false},"author":75,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-8761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"\nBootstrap Form Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Form Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-07T14:15:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:27:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"Bootstrap Form Example\",\"datePublished\":\"2015-12-07T14:15:12+00:00\",\"dateModified\":\"2018-01-08T11:27:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\"},\"wordCount\":594,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\",\"name\":\"Bootstrap Form Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2015-12-07T14:15:12+00:00\",\"dateModified\":\"2018-01-08T11:27:22+00:00\",\"description\":\"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Form Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Form Example - Web Code Geeks - 2026","description":"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Form Example - Web Code Geeks - 2026","og_description":"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-12-07T14:15:12+00:00","article_modified_time":"2018-01-08T11:27:22+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"Bootstrap Form Example","datePublished":"2015-12-07T14:15:12+00:00","dateModified":"2018-01-08T11:27:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/"},"wordCount":594,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/","name":"Bootstrap Form Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2015-12-07T14:15:12+00:00","dateModified":"2018-01-08T11:27:22+00:00","description":"The aim of this example is to explain and use Bootstrap forms. Just as an introduction, a web form or HTML form on a web page allows a user to enter data","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Form Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=8761"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8761\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=8761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=8761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=8761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}