{"id":18520,"date":"2017-09-18T16:15:24","date_gmt":"2017-09-18T13:15:24","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=18520"},"modified":"2018-01-08T12:23:34","modified_gmt":"2018-01-08T10:23:34","slug":"bootstrap-form-builder-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/","title":{"rendered":"Bootstrap Form Builder Example"},"content":{"rendered":"

In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are responsive and provide a nice UI. We will specifically look at creating basic, horizontal and inline forms with Bootstrap and explore the various classes for styling individual form controls like inputs, buttons, anchor tags, text areas among others. So let us get started with building an example application to understand and learn the features of bootstrap for building forms.
\n 
\n 
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n

1. Tools and Technologies<\/h2>\n

To build the example application for this example, I have used the following toolset. Some of them are required whilst others could be replaced by tools of your own choice.<\/p>\n

    \n
  1. Bootstrap v3.3.7<\/a><\/li>\n
  2. JQuery v1.12.4<\/a><\/li>\n
  3. Nodejs v6.3.0<\/a><\/li>\n
  4. Express<\/a><\/li>\n
  5. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    Bootstrap is a front-end framework for designing responsive websites. We also include JQuery since Bootstrap needs it. The JQuery library makes writing JavaScript a breeze. Node.js in essence is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser.<\/p>\n

    2. Project Layout<\/h2>\n

    The project structure of our example application is as follows:<\/p>\n

    \"\"<\/a>
    Project Layout<\/figcaption><\/figure>\n

    css<\/em><\/strong>
    \nThe css folder holds the Bootstrap css files taken from the Bootstrap download.
    \nfonts<\/em><\/strong>
    \nThe fonts that came with the Bootstrap download are placed in this folder.
    \njs<\/em><\/strong>
    \nAll Bootstrap JavaScript files and the ones we create reside in this folder.
    \nindex.js<\/em><\/strong>
    \nThis file is placed in the root of our project and contains code for a bare minimum web server for our use.
    \nindex.html<\/em><\/strong>
    \nThe index.html file contains all the HTML markup. I have used the template provided in the     Getting Started<\/a> section of the Bootstrap website<\/a> as a start.
    \nBasicFormDemo.html<\/em><\/strong>
    \nThis file hosts the demonstration of a Basic Form developed using Bootstrap Framework.
    \nHorizontalFormDemo.html<\/em><\/strong>
    \nThis file hosts the demonstration of a Horizontal Form developed using Bootstrap Framework.
    \nInlineFormDemo.html<\/em><\/strong>
    \nThis file hosts the demonstration of an Inline Form developed using Bootstrap Framework.<\/p>\n

    3. Forms with Bootstrap<\/h2>\n

    While styling forms with Bootstrap there are some rules we need to follow regardless of the type of form we are designing. Firstly, all fields of type input<\/code>, textarea<\/code> and selects<\/code> need to be decorated with the class .form-control<\/code>. This class gives the controls a width of 100%. The next rule is to group controls and their labels in a div<\/code> with the class .form-group<\/code>. This class provides optimum spacing between the controls.<\/p>\n

    3.1. Basic Form with Bootstrap<\/h3>\n

    This is the default mode of a form with Bootstrap and we do not need to decorate the form tag itself with a Bootstrap CSS Class. To leverage this mode we just need to follow the two rules described above for the controls that are part of the form. So, let us build a default form by writing the following Html:<\/p>\n

    BasicFormDemo.html<\/em><\/span><\/p>\n

    ...\r\n<div class=\"container\">\r\n    <form>\r\n        <div class=\"form-group\">\r\n            <label for=\"txtUsername\">Username or Email Address<\/label>\r\n            <input class=\"form-control\" type=\"text\" id=\"txtUsername\" \/>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label for=\"txtPassword\">Password<\/label>\r\n            <input class=\"form-control\" type=\"password\" id=\"txtPassword\" \/>\r\n        <\/div>\r\n        <div class=\"checkbox\">\r\n            <label>\r\n                <input type=\"checkbox\" value=\"\" \/>Remember Me\r\n            <\/label>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label>Take me to<\/label>\r\n            <select class=\"form-control\">\r\n                <option>Dashboard<\/option>\r\n                <option>Admin<\/option>\r\n                <option>Settings<\/option>\r\n            <\/select>\r\n        <\/div>\r\n        <input class=\"btn btn-default\" type=\"button\" value=\"Submit\"\/>\r\n    <\/form>\r\n<\/div>\r\n...\r\n<\/pre>\n
    The resultant UI looks as follows:<\/p>\n
    \"\"<\/a>
    Basic Form<\/figcaption><\/figure>\n
    3.2. Inline Form with Bootstrap<\/h3>\n
    This mode can be enabled by decorating the Form tag with the .form-inline<\/code> CSS Class. This causes all the form elements to be stacked horizontally and wrapped to next line when more space is required. Lets us look at the Html required to create an inline form with Bootstrap.<\/p>\n
    InlineFormDemo.html<\/em><\/span><\/p>\n
    ...\r\n    <form class=\"form-inline\">\r\n        <div class=\"form-group\">\r\n            <label for=\"txtUsername\">Username\/Email<\/label>\r\n            <input class=\"form-control\" type=\"text\" id=\"txtUsername\" \/>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label for=\"txtPassword\">Password<\/label>\r\n            <input class=\"form-control\" type=\"password\" id=\"txtPassword\" \/>\r\n        <\/div>\r\n        <div class=\"checkbox\">\r\n            <label>\r\n                <input type=\"checkbox\" value=\"\" \/>Remember Me\r\n            <\/label>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label for=\"lstPages\">Take me to<\/label>\r\n            <select id=\"lstPages\" class=\"form-control\">\r\n                <option>Dashboard<\/option>\r\n                <option>Admin<\/option>\r\n                <option>Settings<\/option>\r\n            <\/select>\r\n        <\/div>\r\n        <input class=\"btn btn-default\" type=\"button\" value=\"Submit\"\/>\r\n    <\/form>\r\n...\r\n<\/pre>\n
    The resultant UI looks as follows:<\/p>\n
    \"\"<\/a>
    Inline Form<\/figcaption><\/figure>\n
    3.3. Horizontal Form with Bootstrap<\/h3>\n
    This mode of designing a form takes a bit more effort. But the result is a form that acts as a bit like inline form on Big and medium screens and a basic form at smaller viewports. By bit like inline form, I mean to say that the labels of the controls appear to the left of the control at screen sizes exceeding 768px but on smaller screens the labels are placed above the controls like in a default form discussed above. Let us look at the Html required to create a Horizontal Form using Bootstrap:<\/p>\n
    HorizontalFormDemo.html<\/em><\/span><\/p>\n
    ...\r\n    <form class=\"form-horizontal\">\r\n        <div class=\"form-group\">\r\n            <label class=\"control-label col-sm-2\" for=\"txtUsername\">Username\/Email<\/label>\r\n            <div class=\"col-sm-10\">\r\n                <input class=\"form-control\" placeholder=\"Username\/Email\" type=\"text\" id=\"txtUsername\" \/>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label class=\"control-label col-sm-2\" for=\"txtPassword\">Password<\/label>\r\n            <div class=\"col-sm-10\">\r\n                <input class=\"form-control col-sm-10\" placeholder=\"Password\" type=\"password\" id=\"txtPassword\" \/>\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\" value=\"\" \/>Remember Me\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label class=\"control-label col-sm-2\">Take me to<\/label>\r\n            <div class=\"col-sm-10\">\r\n                <select>\r\n                    <option>Dashboard<\/option>\r\n                    <option>Admin<\/option>\r\n                    <option>Settings<\/option>\r\n                <\/select>\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                <input class=\"btn btn-default\" type=\"button\" value=\"Submit\"\/>\r\n            <\/div>\r\n         <\/div>\r\n     <\/form>\r\n...\r\n<\/pre>\n
    The resultant UI looks as follows on different viewports:<\/p>\n
    \"\"<\/a>
    Horizontal Form – Large Screen<\/figcaption><\/figure>\n
    \"\"<\/a>
    Horizontal Form – Small Screen<\/figcaption><\/figure>\n
    4. Running the Application<\/h2>\n
    To run the application we need to run the following two commands at the root of the project.<\/p>\n
    > npm install\r\n<\/pre>\n
    and then<\/p>\n
    > node index.js\r\n<\/pre>\n
    Navigate to http:\/\/localhost:8090<\/code> in a browser and you should see the below:<\/p>\n
    \"\"<\/a>
    Index Page<\/figcaption><\/figure>\n
    5. Download the Source Code<\/h2>\n
    The source code for this example can be downloaded from:<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here :     WCG — Bootstrap Form Builder Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are responsive and provide a nice UI. We will specifically look at creating basic, horizontal and inline forms with Bootstrap and explore the various classes for styling individual form …<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[376,176],"class_list":["post-18520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-form"],"yoast_head":"\nBootstrap Form Builder Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are\" \/>\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-builder-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Form Builder Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-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:published_time\" content=\"2017-09-18T13:15:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T10:23:34+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=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 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-builder-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Bootstrap Form Builder Example\",\"datePublished\":\"2017-09-18T13:15:24+00:00\",\"dateModified\":\"2018-01-08T10:23:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/\"},\"wordCount\":785,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"keywords\":[\"bootstrap\",\"form\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/\",\"name\":\"Bootstrap Form Builder Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-09-18T13:15:24+00:00\",\"dateModified\":\"2018-01-08T10:23:34+00:00\",\"description\":\"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-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-builder-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 Builder 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\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Form Builder Example - Web Code Geeks - 2026","description":"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are","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-builder-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Form Builder Example - Web Code Geeks - 2026","og_description":"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-09-18T13:15:24+00:00","article_modified_time":"2018-01-08T10:23:34+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":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Bootstrap Form Builder Example","datePublished":"2017-09-18T13:15:24+00:00","dateModified":"2018-01-08T10:23:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/"},"wordCount":785,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","keywords":["bootstrap","form"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/","name":"Bootstrap Form Builder Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-09-18T13:15:24+00:00","dateModified":"2018-01-08T10:23:34+00:00","description":"In this example, we will create Html Forms with bootstrap framework. The bootstrap framework has a lot of classes to enable us to create forms that are","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-form-builder-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-builder-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 Builder 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\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18520","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\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=18520"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18520\/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=18520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=18520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=18520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}