{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/forms","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"85dc35f2-ce8f-58c3-bd3b-8555be36f364","title":"Forms","slug":"/contrast/javascript/components/forms"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Forms\",\n  \"metaTitle\": \"Contrast Bootstrap  Forms\",\n  \"metaDescription\": \"Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Forms\"), mdx(\"p\", null, \"Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.\"), mdx(\"p\", null, \"While creating Contrast Design Bootstrap, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.\"), mdx(\"p\", null, \"Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.\"), mdx(\"h2\", null, \"Default Form Login\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/1.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"            <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n                  <div class=\\\"mx-4 p-3\\\">\\n                    <div class=\\\"text-center mt-4 mb-4\\\">\\n                      <p class=\\\"h4\\\"> Sign in </p>\\n                    </div>\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                        <label>E-mail</label>\\n                    </div>\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"password\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                        <label>Password</label>\\n                    </div>\\n                    <div class=\\\"d-flex flex-wrap justify-content-center align-items-center\\\">\\n                      <input type=\\\"checkbox\\\" class=\\\"mr-1\\\"/>\\n                      <p class=\\\"m-0\\\">Remember me</p>\\n                      <a class=\\\"text-decoration-none ml-3\\\" href=\\\"#\\\">Forgot Password ?</a>\\n                    </div>\\n                    <button class=\\\"btn btn-dark btn-block my-3\\\" >\\n                        Sign in\\n                    </button>\\n                    <p class=\\\"text-center\\\">Not a member? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Register</a></p>\\n                    <p class=\\\"text-center\\\"> or sign in with</p>\\n                    <div class=\\\"my-3 d-flex justify-content-center\\\">\\n                      <button class=\\\"m-0 btn btn-flat\\\">\\n                        <i class=\\\"fab fa-facebook-f\\\"></i>\\n                      </button>\\n                      <button class=\\\"m-0 btn btn-flat\\\">\\n                        <i class=\\\"fab fa-twitter\\\"></i>\\n                      </button>\\n                      <button class=\\\"m-0 btn btn-flat\\\">\\n                        <i class=\\\"fab fa-google-plus-g\\\"></i>\\n                      </button>\\n                    </div>\\n                  </div>\\n            </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contrast Form Login\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/2.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div style=\\\"background:black;\\\" class=\\\"text-center text-white\\\">\\n            <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Sign in</p>\\n          </div>\\n          <div class=\\\"mx-4 mt-4 p-3\\\">\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <div class=\\\"mt-5 d-flex flex-wrap justify-content-center align-items-center\\\">\\n              <input type=\\\"checkbox\\\" class=\\\"mr-2\\\"/>\\n              <p class=\\\"m-0\\\">Remember me</p>\\n              <a href=\\\"#\\\" class=\\\"text-decoration-none ml-3\\\">Forgot Password ?</a>\\n            </div>\\n            <button class=\\\"btn btn-block btn-outline-dark my-3\\\" >\\n                Sign in\\n            </button>\\n            <p class=\\\"text-center\\\">Not a member? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Register</a></p>\\n            <p class=\\\"text-center\\\"> or sign in with</p>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button class=\\\"btn m-0\\\">\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button class=\\\"btn m-0\\\">\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button class=\\\"btn m-0\\\">\\n                <i class=\\\"fab fa-linkedin-in\\\"></i>\\n              </button>\\n              <button class=\\\"btn m-0\\\">\\n                <i class=\\\"fab fa-github\\\"></i>\\n              </button>\\n            </div>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Default Form Register\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/3.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-2\\\">\\n              <p class=\\\"h4 mb-5\\\"> Sign up </p>\\n            </div>\\n            <div class=\\\"row mb-n4\\\">\\n              <div class=\\\"col\\\">\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                        <label>First Name</label>\\n                    </div>\\n                  </div>\\n              <div class=\\\"col\\\">\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"text\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                        <label>Last Name</label>\\n                    </div>\\n                  </div>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                    <label>E-mail</label>\\n                </div>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"password\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                    <label>Password</label>\\n                </div>\\n                <p class=\\\"text-muted text-center small\\\">At least 8 characters and 1 digit</p>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"text\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                    <label>Phone number</label>\\n                </div>\\n                <p class=\\\"text-muted text-center small\\\">Optional - for two step authentication</p>\\n            </div>\\n            <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n              <input class=\\\"mr-2\\\" type=\\\"checkbox\\\" />\\n              <p class=\\\"m-0\\\">Subscribe to our newsletter</p>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block my-3 btn-dark\\\" >\\n                Sign up\\n            </button>\\n            <p class=\\\"text-center\\\"> or sign up with</p>\\n            <div class=\\\"mb-3 d-flex justify-content-center\\\">\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n              <p class=\\\"text-center m-0\\\">Already have an account? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Sign In</a></p>\\n            <hr/>\\n            <p class=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">terms of service</a></p>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contrast Form Register\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/4.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"text-center text-white\\\" style=\\\"background:black;\\\">\\n            <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\"> Sign up </p>\\n          </div>\\n          <div class=\\\"mx-4 mt-4 p-3\\\">\\n            <div class=\\\"row mb-n4\\\">\\n              <div class=\\\"col\\\">\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                        <label>First Name</label>\\n                    </div>\\n                  </div>\\n              <div class=\\\"col\\\">\\n                    <div class=\\\"cs-form\\\">\\n                        <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                        <label>Last Name</label>\\n                    </div>\\n                  </div>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                    <label>E-mail</label>\\n                </div>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                    <label>Password</label>\\n                </div>\\n                <p class=\\\"text-muted text-center small\\\">At least 8 characters and 1 digit</p>\\n                <div class=\\\"cs-form\\\">\\n                    <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                    <label>Phone number</label>\\n                </div>\\n                <p class=\\\"text-muted text-center small\\\">Optional - for two step authentication</p>\\n            </div>\\n            <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n              <input class=\\\"mr-2\\\" type=\\\"checkbox\\\" />\\n              <p class=\\\"m-0\\\">Subscribe to our newsletter</p>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block my-3 btn-outline-dark\\\" >\\n                Sign up\\n            </button>\\n            <p class=\\\"text-center\\\"> or sign up with</p>\\n            <div class=\\\"mb-3 d-flex justify-content-center\\\">\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-linkedin-in\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-github\\\"></i>\\n              </button>\\n            </div>\\n              <p class=\\\"text-center m-0\\\">Already have an account? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Sign In</a></p>\\n            <hr/>\\n            <p class=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">terms of service</a></p>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Default Form Subscription\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/5.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-2\\\">\\n              <p class=\\\"h4\\\">Subscribe</p>\\n            </div>\\n            <p class=\\\"text-center mt-4 font-weight-light\\\">Join our mailing list. We write rarely, but only the best content.</p>\\n            <p class=\\\"text-center\\\"><a class=\\\"font-weight-light text-decoration-none mb-4\\\" href=\\\"#\\\">See the last newsletter</a></p>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>Name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <button\\n              class=\\\"btn btn-dark btn-block my-3\\\" >\\n                Subscribe\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contrast Form Submission\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/6.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"text-center text-white\\\" style=\\\"background:black;\\\">\\n            <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Subscribe</p>\\n          </div>\\n          <div class=\\\"mx-4 p-3\\\">\\n            <p class=\\\"text-center mt-2\\\">Join our mailing list. We write rarely, but only the best content.</p>\\n            <p class=\\\"text-center\\\"><a class=\\\"text-decoration-none\\\" href=\\\"#\\\">See the last newsletter</a></p>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block btn-outline-dark my-3\\\" >\\n                Subscribe\\n            </button>\\n          </div>\\n        </div>>\\n\")), mdx(\"h2\", null, \"Default Form Contact\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/7.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-5\\\">\\n              <p class=\\\"h4\\\"> Contact us </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>Name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <p class=\\\"text-center m-0\\\">Subject</p>\\n            <select class=\\\"select w-100\\\">\\n              <option>Resources</option>\\n              <option>Docs</option>\\n              <option>Contact</option>\\n            </select>\\n            <div class=\\\"cs-form mt-4\\\">\\n                <textarea class=\\\"form-control border-top-0 border-left-0 border-right-0\\\"></textarea>\\n                <label>Message</label>\\n            </div>\\n            <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n              <input class=\\\"mr-2\\\" type=\\\"checkbox\\\">\\n              <p class=\\\"m-0\\\">Send me a copy of this message</p>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block btn-dark my-3\\\" >\\n                Send\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contrast Form Contact\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/8.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"     <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div style=\\\"background:black;\\\" class=\\\"text-center text-white mb-4\\\">\\n            <p class=\\\"h5 mt-2 py-4 font-weight-bold\\\">Contact Us</p>\\n          </div>\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <p class=\\\"text-center m-0 text-muted\\\">Subject</p>\\n            <select class=\\\"select w-100\\\">\\n              <option>Resources</option>\\n              <option>Docs</option>\\n              <option>Contact</option>\\n            </select>\\n            <div class=\\\"cs-form mt-4\\\">\\n                <textarea class=\\\"form-control\\\"></textarea>\\n                <label>Message</label>\\n            </div>\\n            <div class=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n              <input class=\\\"mr-2\\\" type=\\\"checkbox\\\">\\n              <p class=\\\"m-0\\\">Send me a copy of this message</p>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block btn-outline-dark my-3\\\" >\\n                Send\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Login Form with Icons\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/9.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-user prefix\\\"></i>\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-lock prefix\\\"></i>\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-success btn-block mt-5 mx-auto\\\">\\n                Login\\n            </button>\\n          </div>\\n        </div>>\\n\")), mdx(\"h2\", null, \"Login Form with Outside Label\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/10.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-4\\\">\\n              <p class=\\\"h4\\\"> Sign in </p>\\n            </div>\\n            <div>\\n              <label htmlFor=\\\"defaultLoginEmail\\\" class=\\\"text-muted\\\">\\n                Your email\\n              </label>\\n              <input type=\\\"email\\\" id=\\\"defaultLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginPassword\\\" class=\\\"text-muted\\\">\\n                Your password\\n              </label>\\n              <input type=\\\"password\\\" id=\\\"defaultLoginPassword\\\" class=\\\"form-control\\\">\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-primary btn-block mt-5 mx-auto\\\">\\n                Login\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Sign Up Form with Icon\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/11.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-user prefix\\\"></i>\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Your name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-envelope prefix\\\"></i>\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>Your Email</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-exclamation-triangle prefix\\\"></i>\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>Confirm your Email</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-lock prefix\\\"></i>\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Your Password</label>\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-success btn-block mt-5 mx-auto\\\">\\n                Register\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Sign Up Form Outside Label\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/12.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-4\\\">\\n              <p class=\\\"h4\\\"> Sign in </p>\\n            </div>\\n            <div>\\n              <label htmlFor=\\\"defaultLoginName\\\" class=\\\"text-muted\\\">\\n                Your name\\n              </label>\\n              <input type=\\\"text\\\" id=\\\"defaultLoginName\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginEmail\\\" class=\\\"text-muted\\\">\\n                Your email\\n              </label>\\n              <input type=\\\"email\\\" id=\\\"defaultLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"confirmLoginEmail\\\" class=\\\"text-muted\\\">\\n                Confirm your Email\\n              </label>\\n              <input type=\\\"email\\\" id=\\\"confirmLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginPassword\\\" class=\\\"text-muted\\\">\\n                Your password\\n              </label>\\n              <input type=\\\"password\\\" id=\\\"defaultLoginPassword\\\" class=\\\"form-control\\\">\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-danger btn-block mt-5 mx-auto\\\">\\n                Register\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Subscription Form with Icon\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/13.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4 font-weight-bold\\\"> Subscribe </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-user prefix\\\"></i>\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Your Name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-lock prefix\\\"></i>\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>Your Email</label>\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-outline-primary btn-block mt-5 mx-auto\\\">\\n                Send\\n                <i class=\\\"fa fa-paper-plane\\\"></i>\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Subscription Form without Icon\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/14.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-4\\\">\\n              <p class=\\\"h4\\\"> Subscribe </p>\\n            </div>\\n            <div>\\n              <label htmlFor=\\\"defaultLoginPassword\\\" class=\\\"text-muted\\\">\\n                Your Name\\n              </label>\\n              <input type=\\\"text\\\" id=\\\"defaultLoginPassword\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginEmail\\\" class=\\\"text-muted\\\">\\n                Your email\\n              </label>\\n              <input type=\\\"email\\\" id=\\\"defaultLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-outline-danger btn-block mt-5 mx-auto\\\">\\n                Send\\n                <i class=\\\"fa fa-paper-plane\\\"></i>\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contact Form with Icon\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/15.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4 font-weight-bold\\\"> Write to us </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-user prefix\\\"></i>\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Your name</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-envelope prefix\\\"></i>\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>Your Email</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-tags prefix\\\"></i>\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Subject</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <i class=\\\"fa fa-envelope prefix\\\"></i>\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Your Message</label>\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-outline-secondary btn-block mt-5 mx-auto\\\">\\n                Send\\n                <i class=\\\"fa fa-paper-plane\\\"></i>\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Contact Form with Outside Label\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/16.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center mt-4 mb-4\\\">\\n              <p class=\\\"h4\\\"> Write to us </p>\\n            </div>\\n            <div>\\n              <label htmlFor=\\\"defaultLoginName\\\" class=\\\"text-muted\\\">\\n                Your name\\n              </label>\\n              <input type=\\\"text\\\" id=\\\"defaultLoginName\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginEmail\\\" class=\\\"text-muted\\\">\\n                Your email\\n              </label>\\n              <input type=\\\"email\\\" id=\\\"defaultLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"confirmLoginEmail\\\" class=\\\"text-muted\\\">\\n                Subject\\n              </label>\\n              <input type=\\\"text\\\" id=\\\"confirmLoginEmail\\\" class=\\\"form-control\\\">\\n            </div>\\n            <div class=\\\"mt-3\\\">\\n              <label htmlFor=\\\"defaultLoginPassword\\\" class=\\\"text-muted\\\">\\n                Your message\\n              </label>\\n              <textarea class=\\\"form-control\\\"></textarea>\\n            </div>\\n            <button\\n              style=\\\"width:40%;\\\"\\n              class=\\\"btn btn-outline-danger btn-block mt-5 mx-auto\\\">\\n                Send\\n                <i class=\\\"fa fa-paper-plane\\\"></i>\\n            </button>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Form Login\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/17.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <p class=\\\"mt-n3 text-right\\\"><a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Forgot Password ?</a></p>\\n            <button\\n              class=\\\"btn btn-dark btn-block my-4 mx-0\\\">\\n                Sign in\\n            </button>\\n            <p class=\\\"text-center\\\"> or sign in with</p>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n            <hr/>\\n            <p class=\\\"text-center\\\">Not a member? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Sign up</a></p>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Sign Up\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/18.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"        <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"text-center my-4\\\">\\n              <p class=\\\"h4\\\"> Sign up </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <div class=\\\"d-flex align-items-center\\\">\\n              <input type=\\\"checkbox\\\"/>\\n              <p class=\\\"mb-0 ml-3\\\">Accept the <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">terms and conditions</a></p>\\n            </div>\\n            <div class=\\\"d-flex mt-4 align-items-center\\\">\\n              <button\\n                style=\\\"width:30%; background:linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%);\\\"\\n                class=\\\"btn btn-block\\\" >\\n                  Sign up\\n              </button>\\n              <p class=\\\"ml-auto mb-0\\\">Have an account? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Log in</a></p>\\n            </div>\\n          </div>\\n          <div class=\\\"pt-4\\\" style=\\\"background:linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%);\\\">\\n            <p class=\\\"text-center m-0\\\"> or sign up with</p>\\n            <div class=\\\"mb-3 d-flex justify-content-center\\\">\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn\\\"\\n              >\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Login Form\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/19.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div style=\\\"background:linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%);\\\" class=\\\"text-center mb-4\\\">\\n            <p class=\\\"h5 mt-2 mt-5 mb-2 font-weight-bold\\\">Login</p>\\n            <div class=\\\"mb-3 d-flex justify-content-center\\\">\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-linkedin-in\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"m-0 btn btn-flat\\\"\\n              >\\n                <i class=\\\"fab fa-github\\\"></i>\\n              </button>\\n            </div>\\n          </div>\\n          <div class=\\\"mx-4 p-3\\\">\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <p class=\\\"text-right\\\">Forgot <a class=\\\"text-decoration-none ml-auto\\\" href=\\\"#\\\">Password ?</a></p>\\n            <button\\n              style=\\\"width:40%; background:linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%);\\\"\\n              class=\\\"btn btn-block my-3 mx-0 font-weight-bold\\\" >\\n                Login\\n            </button>\\n            <p class=\\\" text-right mt-4\\\">Don't have an account? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Sign Up</a></p>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Sign Up with Background Image\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/20.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"       <div class=\\\"border d-flex flex-column view\\\" style=\\\"width:30rem; background:url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh); background-size:cover;\\\">\\n          <div class=\\\"mask pattern-4\\\"></div>\\n          <div class=\\\"mx-4 p-3\\\" style=\\\"z-index:2;\\\">\\n            <div class=\\\"text-center my-5\\\">\\n              <p class=\\\"h4 font-weight-bold text-white\\\"> Sign up </p>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"email\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>E-mail</label>\\n            </div>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control border-top-0 border-left-0 border-right-0\\\">\\n                <label>Password</label>\\n            </div>\\n            <div class=\\\"d-flex mt-3 align-items-center justify-content-center\\\">\\n              <input type=\\\"checkbox\\\"/>\\n              <p class=\\\"text-white mb-0 ml-2\\\">Accept the <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">terms and conditions</a></p>\\n            </div>\\n            <button\\n              class=\\\"btn btn-block my-4\\\" >\\n                Sign up\\n            </button>\\n            <p class=\\\"text-white text-center mb-5\\\">Have an account? <a class=\\\"text-decoration-none\\\" href=\\\"#\\\">Log in</a></p>\\n          </div>\\n        </div>\\n\")), mdx(\"h2\", null, \"Sign In Forms\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/21.png\",\n    \"alt\": \"image info\"\n  })), \"\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/22.png\",\n    \"alt\": \"image info\"\n  })), \"\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/23.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"      <div class=\\\"header\\\">Sign In forms \\n        <a href=\\\"https://devwares.com/product/contrast-pro\\\" target=\\\"_blank\\\" rel=\\\"noreferrer\\\" class=\\\"text-white text-decoration-none\\\">\\n          <span class=\\\"px-3 py-2\\\" style=\\\"background-color:#9871ff;\\\">Pro Component</span>\\n        </a>\\n      </div>\\n      <div class=\\\"description\\\">Sign In Form in card</div>\\n      <div class=\\\"example2\\\">\\n        <div class=\\\"shadow border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"p-5\\\">\\n            <div class=\\\"mt-4 mb-5\\\">\\n              <h4 class=\\\"h2 font-weight-bold\\\">Sign up</h4>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Username</label>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <button\\n              class=\\\"btn btn-dark btn-block mb-3 mt-5\\\" >\\n                Sign up\\n            </button>\\n            <p class=\\\"text-muted\\\">By Clicking sign up, you agree to the Contrast <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">terms and conditions</a></p>\\n            <div class=\\\"d-flex align-items-center\\\">\\n              <span style=\\\"border:0.5px solid black; width:45%;\\\"></span>\\n              <span class=\\\"text-center\\\" style=\\\"width:10%;\\\">OR</span>\\n              <span style=\\\"border:0.5px solid black; width:45%;\\\"></span>\\n            </div>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button class=\\\"btn btn-flat btn-dark\\\">\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button\\n                class=\\\"btn btn-flat btn-dark\\\"\\n              >\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-flat btn-dark\\\">\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n            <p class=\\\"text-muted text-center\\\">Have an Account? <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Sign In</a></p>\\n          </div>\\n        </div>\\n        <div class=\\\"shadow border d-flex flex-column mt-4\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"p-5\\\">\\n            <div class=\\\"my-4 d-flex align-items-center\\\">\\n              <div>\\n                <h4 class=\\\"h4 mt-0 font-weight-bold\\\">Sign up</h4>\\n                <p class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Let's get started</p>\\n              </div>\\n              <button class=\\\"btn btn-outline-dark ml-auto px-4\\\" style=\\\"font-weight:600;\\\">Sign Up</button>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Username</label>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <button\\n              class=\\\"btn btn-dark btn-block mb-3 mt-5\\\" >\\n                Sign up\\n            </button>\\n            <p class=\\\"text-muted\\\">By Clicking sign up, you agree to the Contrast <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">terms and conditions</a></p>\\n            <div class=\\\"d-flex align-items-center\\\">\\n              <span style=\\\"border:0.5px solid black; width:45%;\\\"></span>\\n              <span class=\\\"text-center\\\" style=\\\"width:10%\\\">OR</span>\\n              <span style=\\\"border:0.5px solid black; width:45%;\\\"></span>\\n            </div>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n            <p class=\\\"text-muted text-center\\\">Have an Account? <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Sign In</a></p>\\n          </div>\\n        </div>\\n      </div>\\n      <div class=\\\"example2\\\">\\n        <div class=\\\"shadow border d-flex flex-column\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"p-5\\\">\\n            <div class=\\\"mt-4 mb-5\\\">\\n              <h4 class=\\\"h2 font-weight-bold\\\">Sign in</h4>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Username</label>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Forgot Password?</a>\\n            <button\\n              class=\\\"btn btn-dark btn-block mb-3 mt-5\\\" >\\n                Sign in\\n            </button>\\n            <div class=\\\"d-flex align-items-center\\\">\\n              <span style=\\\"border:0.5px solid #555; width:45%;\\\"></span>\\n              <span class=\\\"text-center\\\" style=\\\"width:10%;\\\">OR</span>\\n              <span style=\\\"border:0.5px solid #555; width:45%;\\\"></span>\\n            </div>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n            <p class=\\\"text-muted text-center\\\">Don't have an Account? <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Sign Up</a></p>\\n          </div>\\n        </div>\\n        <div class=\\\"shadow border d-flex flex-column mt-4\\\" style=\\\"width:30rem;\\\">\\n          <div class=\\\"p-5\\\">\\n            <div class=\\\"my-4 d-flex align-items-center\\\">\\n              <div>\\n                <h4 class=\\\"h4 mt-0 font-weight-bold\\\">Sign in</h4>\\n                <p class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Welcome Back.</p>\\n              </div>\\n              <button class=\\\"btn btn-outline-dark ml-auto px-4\\\" style=\\\"font-weight:600;\\\">Sign Up</button>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" class=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"text\\\" class=\\\"form-control\\\">\\n                <label>Username</label>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" class=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <div class=\\\"cs-form\\\">\\n                <input type=\\\"password\\\" class=\\\"form-control\\\">\\n                <label>Password</label>\\n            </div>\\n            <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Forgot Password?</a>\\n            <button\\n              class=\\\"btn btn-dark btn-block mb-3 mt-5\\\" >\\n                Sign in\\n            </button>\\n            <div class=\\\"d-flex align-items-center\\\">\\n              <span style=\\\"border:0.5px solid #555; width:45%;\\\"></span>\\n              <span class=\\\"text-center\\\" style=\\\"width:10%;\\\">OR</span>\\n              <span style=\\\"border:0.5px solid #555; width:45%;\\\"></span>\\n            </div>\\n            <div class=\\\"my-3 d-flex justify-content-center\\\">\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-facebook-f\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-twitter\\\"></i>\\n              </button>\\n              <button class=\\\"btn btn-dark btn-flat\\\">\\n                <i class=\\\"fab fa-google-plus-g\\\"></i>\\n              </button>\\n            </div>\\n            <p class=\\\"text-muted text-center\\\">Don't have an Account? <a style=\\\"font-weight:600;\\\" class=\\\"text-decoration-none text-dark\\\" href=\\\"#\\\">Sign Up</a></p>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n\")), mdx(\"h6\", null, \"Script\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"    <script type=\\\"module\\\" src=\\\"../js/cdb.js\\\" defer></script>\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#forms","title":"Forms","items":[{"url":"#default-form-login","title":"Default Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#contrast-form-login","title":"Contrast Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#default-form-register","title":"Default Form Register","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#contrast-form-register","title":"Contrast Form Register","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#default-form-subscription","title":"Default Form Subscription","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#contrast-form-submission","title":"Contrast Form Submission","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#default-form-contact","title":"Default Form Contact","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#contrast-form-contact","title":"Contrast Form Contact","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]},{"url":"#login-form-with-icons","title":"Login Form with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-8","title":"html"}]}]}]}]},{"url":"#login-form-with-outside-label","title":"Login Form with Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-9","title":"html"}]}]}]}]},{"url":"#sign-up-form-with-icon","title":"Sign Up Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-10","title":"html"}]}]}]}]},{"url":"#sign-up-form-outside-label","title":"Sign Up Form Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-11","title":"html"}]}]}]}]},{"url":"#subscription-form-with-icon","title":"Subscription Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-12","title":"html"}]}]}]}]},{"url":"#subscription-form-without-icon","title":"Subscription Form without Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-13","title":"html"}]}]}]}]},{"url":"#contact-form-with-icon","title":"Contact Form with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-14","title":"html"}]}]}]}]},{"url":"#contact-form-with-outside-label","title":"Contact Form with Outside Label","items":[{"items":[{"items":[{"items":[{"url":"#html-15","title":"html"}]}]}]}]},{"url":"#form-login","title":"Form Login","items":[{"items":[{"items":[{"items":[{"url":"#html-16","title":"html"}]}]}]}]},{"url":"#sign-up","title":"Sign Up","items":[{"items":[{"items":[{"items":[{"url":"#html-17","title":"html"}]}]}]}]},{"url":"#login-form","title":"Login Form","items":[{"items":[{"items":[{"items":[{"url":"#html-18","title":"html"}]}]}]}]},{"url":"#sign-up-with-background-image","title":"Sign Up with Background Image","items":[{"items":[{"items":[{"items":[{"url":"#html-19","title":"html"}]}]}]}]},{"url":"#sign-in-forms","title":"Sign In Forms","items":[{"items":[{"items":[{"items":[{"url":"#html-20","title":"html"},{"url":"#script","title":"Script"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/forms.md"},"frontmatter":{"metaTitle":"Contrast Bootstrap  Forms","metaDescription":"Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"85dc35f2-ce8f-58c3-bd3b-8555be36f364"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}