{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/footer","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"74f703df-7115-5345-b33c-a4767625d41f","title":"Footer","slug":"/contrast/angular/components/footer"},"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\": \"Footer\",\n  \"metaTitle\": \"Footer Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"ngular Bootstrap Footer is an additional navigation for the website\"\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, \"Footer\"), mdx(\"p\", null, \"Angular Bootstrap Footer is an additional navigation for the website. It can hold \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"links\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"company info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"copyrights\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"buttons\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"forms\"), \". and many other elements.\"), mdx(\"p\", null, \"You can set the color of the footer by adding one of classes from our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color palette\"), \".\"), mdx(\"p\", null, \"Just like any other components of CDBootstrap, Footers are responsive by default.\"), mdx(\"h2\", null, \"Example 1\"), mdx(\"p\", null, \"Default Footer example.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7acdf8429165495c82f23751f32eca01/dc9fa/footer1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.096525096525095%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAAAnElEQVQY031QOQ4DIRDb/7+EN2Rrys0faDZtFGC4cRgUCEmxliyNzNgesVVUlFBAL4sYIxi11k6G9x7GmKkxnXMoy04IASmlPm9dsBH6qaGbMYRvKIOa2Vj7o3FByhkDRK4Xz8DzceK27ziOO3xrW81r+9BiTCilzEB+z5+CHqiUghACUkr8g0PYzByBV9jGv61tK/lCIuoc117xDdTZh5hRcF6JAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/7acdf8429165495c82f23751f32eca01/e3189/footer1.png\",\n    \"srcSet\": [\"/static/7acdf8429165495c82f23751f32eca01/a2ead/footer1.png 259w\", \"/static/7acdf8429165495c82f23751f32eca01/6b9fd/footer1.png 518w\", \"/static/7acdf8429165495c82f23751f32eca01/e3189/footer1.png 1035w\", \"/static/7acdf8429165495c82f23751f32eca01/44d59/footer1.png 1553w\", \"/static/7acdf8429165495c82f23751f32eca01/dc9fa/footer1.png 1817w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex flex-column mx-auto py-5\\\" style=\\\"width: 80%;\\\">\\n            <div class=\\\"d-flex justify-content-between\\\">\\n                <div>\\n                    <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                        <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                        <span class=\\\"ml-3 h5 font-weight-bold\\\">Devwares</span>\\n                    </CDBLink>\\n                    <p class=\\\"my-3\\\" style=\\\"width: 250px;\\\" >We are creating High Quality Resources and tools to Aid\\n                        developers during the developement of their projects</p>\\n                    <div class=\\\"mt-4\\\">\\n                        <CDBBtn [flat]=true color=\\\"dark\\\">\\n                            <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                        </CDBBtn>\\n                        <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                            <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                        </CDBBtn>\\n                        <CDBBtn [flat]=true color=\\\"dark\\\">\\n                            <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                        </CDBBtn>\\n                    </div>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Devwares</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Resources</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">About Us</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Contact</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Blog</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n            </div>\\n            <small class=\\\"text-center mt-5\\\">&copy; Devwares, 2020. All rights reserved.</small>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 2\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5dacd73eaa959920495ae8adb805e6fc/f8544/footer2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.77992277992278%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAAAlklEQVQY032QyQ4CIRBE+f+7/B8Hj+Mk7LKVFIphMLGSIs1r6G4QrTbUVJBLQWvtayrGCOf8hddaB18ZTcacyL7gvB84zscA1CxorYUx9sJ4RmuN+tlPro1BzhlCKQUpZfcNjOeld0GHZ0pYxVwI4ec1vrPSXym4OOfGNIx3sQA707PRP4l5cF5MfaLV/Bvv/TAn2/O7X0Yhh1SZkHhPAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/5dacd73eaa959920495ae8adb805e6fc/e3189/footer2.png\",\n    \"srcSet\": [\"/static/5dacd73eaa959920495ae8adb805e6fc/a2ead/footer2.png 259w\", \"/static/5dacd73eaa959920495ae8adb805e6fc/6b9fd/footer2.png 518w\", \"/static/5dacd73eaa959920495ae8adb805e6fc/e3189/footer2.png 1035w\", \"/static/5dacd73eaa959920495ae8adb805e6fc/44d59/footer2.png 1553w\", \"/static/5dacd73eaa959920495ae8adb805e6fc/f8544/footer2.png 1811w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex flex-column mx-auto py-5\\\" style=\\\"width:80%\\\">\\n            <div class=\\\"d-flex justify-content-between\\\">\\n                <div class=\\\"align-self-center\\\">\\n                    <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                        <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                        <span class=\\\"ml-3 h5 font-weight-bold\\\">Devwares</span>\\n                    </CDBLink>\\n                    <div class=\\\"mt-5\\\">\\n                        <CDBBtn [flat]=true color=\\\"dark\\\">\\n                            <CDBIcon [fab]=true icon=\\\"facebook-f\\\"></CDBIcon>\\n                        </CDBBtn>\\n                        <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                            <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n                        </CDBBtn>\\n                        <CDBBtn [flat]=true color=\\\"dark\\\">\\n                            <CDBIcon [fab]=true icon=\\\"instagram\\\"></CDBIcon>\\n                        </CDBBtn>\\n                    </div>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Devwares</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Resources</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">About Us</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Contact</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Blog</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n            </div>\\n            <small class=\\\"text-center mt-5\\\">&copy; Devwares, 2020. All rights reserved.</small>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 3\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/37a5686d686b40bf478b6e80e3eeee1f/476e1/footer3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.482625482625483%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAAAlklEQVQY04VQCQ4CIRDb/z+C9XlGg4ZLhnOkY5ZV49GkCbRDp2Hp3LlRY391TIkY6L0LgRgjO+enBkJ7n6m1ynkRwROfjyfWF80ppRkK3MYw0WPRpjvvpw+EEDjnvAfiYowZTdw0nrfD8yOktSZ6KeWlIdrBm4GfsA1rrVkpxYd1lSb/sGDbN2IzjS+w1g46+Q5ov97cAYBnh8dmgq6XAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/37a5686d686b40bf478b6e80e3eeee1f/e3189/footer3.png\",\n    \"srcSet\": [\"/static/37a5686d686b40bf478b6e80e3eeee1f/a2ead/footer3.png 259w\", \"/static/37a5686d686b40bf478b6e80e3eeee1f/6b9fd/footer3.png 518w\", \"/static/37a5686d686b40bf478b6e80e3eeee1f/e3189/footer3.png 1035w\", \"/static/37a5686d686b40bf478b6e80e3eeee1f/44d59/footer3.png 1553w\", \"/static/37a5686d686b40bf478b6e80e3eeee1f/476e1/footer3.png 1841w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex flex-column mx-auto py-5\\\" style=\\\"width:80%\\\">\\n            <div class=\\\"d-flex justify-content-between\\\">\\n                <div>\\n                    <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                        <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                        <span class=\\\"ml-3 h5 font-weight-bold\\\">Devwares</span>\\n                    </CDBLink>\\n                    <p class=\\\"my-3\\\" style=\\\"width:250px\\\">We are creating High Quality Resources and tools to Aid\\n                        developers during the developement of their projects</p>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Devwares</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Resources</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">About Us</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Contact</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Blog</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n            </div>\\n            <div class=\\\"text-center mt-4\\\">\\n                <div class=\\\"mb-4\\\">\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                        <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                </div>\\n                <small>&copy; Devwares, 2020. All rights reserved.</small>\\n            </div>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 4\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a358139028e0e1076899eea4f7f96874/191e2/footer4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.77992277992278%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAAAnklEQVQY042QUQ6EIAxEuf8lvIAH8cs7+G2yuoJAKXSWmtUE/fElEwK0nQEjEJyISCPndnjvrzsl54wY46M+hHCsRljgF4fNuavpZNts06xwHWitbUIwM9Z1PcxMjgW8E1I9vLu6aqJF94Thb1JKwR2jT06ckKgqJbzlNJimCV3Xoe97LMsHRodQJEQiUJXu30oTzvOMYRgwjmP9oi9+nMGHBTikxqsAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/a358139028e0e1076899eea4f7f96874/e3189/footer4.png\",\n    \"srcSet\": [\"/static/a358139028e0e1076899eea4f7f96874/a2ead/footer4.png 259w\", \"/static/a358139028e0e1076899eea4f7f96874/6b9fd/footer4.png 518w\", \"/static/a358139028e0e1076899eea4f7f96874/e3189/footer4.png 1035w\", \"/static/a358139028e0e1076899eea4f7f96874/44d59/footer4.png 1553w\", \"/static/a358139028e0e1076899eea4f7f96874/191e2/footer4.png 1836w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex flex-column mx-auto py-5\\\" style=\\\"width:80%\\\">\\n            <div class=\\\"d-flex justify-content-between\\\">\\n                <div class=\\\"align-self-center\\\">\\n                    <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                        <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                        <span class=\\\"ml-4 h5 font-weight-bold\\\">Devwares</span>\\n                    </CDBLink>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Devwares</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Resources</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">About Us</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Contact</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Blog</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n                <div>\\n                    <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                    <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                        <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                    </ul>\\n                </div>\\n            </div>\\n            <div class=\\\"d-flex justify-content-between align-items-center mt-4\\\">\\n                <small>&copy; Devwares, 2020. All rights reserved.</small>\\n                <div>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                        <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                </div>\\n            </div>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 5\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9faf659805901348e618ce175853ff61/6fa81/footer5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"7.3359073359073355%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAPElEQVQI123IsQ3AMAgAwexfMwV7UaayI4EIvGPXeemav5rm9eK5B2NOIgL/ZCbd/auq2Lk7qoqIYGbnLVToTG04IifDAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/9faf659805901348e618ce175853ff61/e3189/footer5.png\",\n    \"srcSet\": [\"/static/9faf659805901348e618ce175853ff61/a2ead/footer5.png 259w\", \"/static/9faf659805901348e618ce175853ff61/6b9fd/footer5.png 518w\", \"/static/9faf659805901348e618ce175853ff61/e3189/footer5.png 1035w\", \"/static/9faf659805901348e618ce175853ff61/44d59/footer5.png 1553w\", \"/static/9faf659805901348e618ce175853ff61/6fa81/footer5.png 1856w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex justify-content-between align-items-center mx-auto py-4\\\" style=\\\"width:80%\\\">\\n            <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                <span class=\\\"ml-4 h5 font-weight-bold\\\">Devwares</span>\\n                <small class=\\\"ml-2\\\">&copy; Devwares, 2020. All rights reserved.</small>\\n            </CDBLink>\\n            <div>\\n                <CDBBtn [flat]=true color=\\\"dark\\\">\\n                    <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                </CDBBtn>\\n                <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                    <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                </CDBBtn>\\n                <CDBBtn [flat]=true color=\\\"dark\\\">\\n                    <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                </CDBBtn>\\n            </div>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 6\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/56753096d34a224585044a1e382c6af5/60c1e/footer6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.393822393822393%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAAgklEQVQY03VP2w0DIQy7/XdgAkYD9YM7AoSHS9Kilj6MEgnHcpxjjAF5C/r/UYKcM87z+tIREVpryh/Sepnk7UJMtInflwhSSoiRNm4tar2/DEcf4Mxg5k34CZmvJBpkmoQQ4L1HrfVhKAYyKFNcStHBv7NX9WcaOdVaC2MMnHPK3QE5dDovjrnFFgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/56753096d34a224585044a1e382c6af5/e3189/footer6.png\",\n    \"srcSet\": [\"/static/56753096d34a224585044a1e382c6af5/a2ead/footer6.png 259w\", \"/static/56753096d34a224585044a1e382c6af5/6b9fd/footer6.png 518w\", \"/static/56753096d34a224585044a1e382c6af5/e3189/footer6.png 1035w\", \"/static/56753096d34a224585044a1e382c6af5/44d59/footer6.png 1553w\", \"/static/56753096d34a224585044a1e382c6af5/60c1e/footer6.png 1866w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex flex-column mx-auto py-5\\\" style=\\\"width:80%\\\">\\n            <div class=\\\"d-flex justify-content-between\\\">\\n                <div class=\\\"align-self-center\\\">\\n                    <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                        <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                        <span class=\\\"ml-4 h5 font-weight-bold\\\">Devwares</span>\\n                    </CDBLink>\\n                </div>\\n                <div class=\\\"d-flex justify-content-between\\\" style=\\\"width:40%\\\">\\n                    <div>\\n                        <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Devwares</p>\\n                        <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Resources</a></li>\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">About Us</a></li>\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Contact</a></li>\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Blog</a></li>\\n                        </ul>\\n                    </div>\\n                    <div>\\n                        <p class=\\\"h5 mb-4\\\" style=\\\"font-weight:600\\\">Help</p>\\n                        <ul style=\\\"list-style:none; cursor:pointer\\\">\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Support</a></li>\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign Up</a></li>\\n                            <li class=\\\"my-2\\\"><a class=\\\"text-dark\\\" href=\\\"/\\\">Sign In</a></li>\\n                        </ul>\\n                    </div>\\n                </div>\\n            </div>\\n            <div class=\\\"d-flex justify-content-between align-items-center mt-4\\\">\\n                <small>&copy; Devwares, 2020. All rights reserved.</small>\\n                <div>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                        <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                    <CDBBtn [flat]=true color=\\\"dark\\\">\\n                        <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                    </CDBBtn>\\n                </div>\\n            </div>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h2\", null, \"Example 7\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6cfe04a343a40a57a4f540ef1248bca1/84a78/footer7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"6.94980694980695%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAPElEQVQI12XJwQmAQAwFUfvvIC2koVThRdk1kPBn0ZvswDvNIUSN5j4vxjOR9FNVZOanu7fv7pgZEcHbAlZlTFguTchTAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/6cfe04a343a40a57a4f540ef1248bca1/e3189/footer7.png\",\n    \"srcSet\": [\"/static/6cfe04a343a40a57a4f540ef1248bca1/a2ead/footer7.png 259w\", \"/static/6cfe04a343a40a57a4f540ef1248bca1/6b9fd/footer7.png 518w\", \"/static/6cfe04a343a40a57a4f540ef1248bca1/e3189/footer7.png 1035w\", \"/static/6cfe04a343a40a57a4f540ef1248bca1/44d59/footer7.png 1553w\", \"/static/6cfe04a343a40a57a4f540ef1248bca1/84a78/footer7.png 1832w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"    <CDBFooter class=\\\"shadow\\\">\\n        <div class=\\\"d-flex justify-content-between align-items-center mx-auto py-4\\\" style=\\\"width:80%\\\">\\n            <CDBLink class=\\\"d-flex align-items-center p-0 text-dark\\\">\\n                <img alt=\\\"logo\\\" src=\\\"../../../assets/img/pages/logo.png\\\" width=\\\"30px\\\" />\\n                <span class=\\\"ml-4 h5 font-weight-bold\\\">Devwares</span>\\n            </CDBLink>\\n            <small>&copy; Devwares, 2020. All rights reserved.</small>\\n            <div>\\n                <CDBBtn [flat]=true color=\\\"dark\\\">\\n                    <CDBIcon [fab]=true icon=\\\"facebook-f\\\" ></CDBIcon>\\n                </CDBBtn>\\n                <CDBBtn [flat]=true color=\\\"dark\\\" class=\\\"mx-3\\\">\\n                    <CDBIcon [fab]=true icon=\\\"twitter\\\" ></CDBIcon>\\n                </CDBBtn>\\n                <CDBBtn [flat]=true color=\\\"dark\\\">\\n                    <CDBIcon [fab]=true icon=\\\"instagram\\\" ></CDBIcon>\\n                </CDBBtn>\\n            </div>\\n        </div>\\n    </CDBFooter>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Footer Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {FooterModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Footer Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Footer component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines component's color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"blue\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#footer","title":"Footer","items":[{"url":"#example-1","title":"Example 1","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#example-2","title":"Example 2","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#example-3","title":"Example 3","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#example-4","title":"Example 4","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#example-5","title":"Example 5","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#example-6","title":"Example 6","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#example-7","title":"Example 7","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-footer-bootstrap-modules-used","title":"Contrast Footer Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/footer.md"},"frontmatter":{"metaTitle":"Footer Component for Contrast Bootstrap Angular","metaDescription":"ngular Bootstrap Footer is an additional navigation for the website"}},"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":"74f703df-7115-5345-b33c-a4767625d41f"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}