{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/footer","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"3297a528-7f25-58e8-8e36-e48bc969693d","title":"Footer","slug":"/contrast/react/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 React\",\n \"metaDescription\": \"Building a Footer Component using the Contrast Bootstrap React Package\"\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, \"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(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex flex-column mx-auto py-5\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between\"\n }, mdx(\"div\", null, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-3 h5 font-weight-bold\"\n }, \"Devwares\")), mdx(\"p\", {\n className: \"my-3\",\n style: {\n \"width\": \"250px\"\n }\n }, \"We are creating High Quality Resources and tools to Aid developers during the developement of their projects\"), mdx(\"div\", {\n className: \"mt-4\"\n }, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n })))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Devwares\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Resourceses\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"About Us\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Contact\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Blog\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\"))))), mdx(\"small\", {\n className: \"text-center mt-5\"\n }, \"\\xA9 Devwares, 2020. All rights reserved.\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n
\\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n

We are creating High Quality Resources and tools to Aid developers during the developement of their projects

\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n

Devwares

\\n
    \\n Resources\\n About Us\\n Contact\\n Blog\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n © Devwares, 2020. All rights reserved.\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 2\"), mdx(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex flex-column mx-auto py-5\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between\"\n }, mdx(\"div\", {\n className: \"align-self-center\"\n }, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-3 h5 font-weight-bold\"\n }, \"Devwares\")), mdx(\"div\", {\n className: \"mt-5\"\n }, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n })))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Devwares\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Resources\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"About Us\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Contact\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Blog\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\"))))), mdx(\"small\", {\n className: \"text-center mt-5\"\n }, \"\\xA9 Devwares, 2020. All rights reserved.\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n
\\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n

Devwares

\\n
    \\n Resources\\n About Us\\n Contact\\n Blog\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n © Devwares, 2020. All rights reserved.\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 3\"), mdx(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex flex-column mx-auto py-5\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between\"\n }, mdx(\"div\", null, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-3 h5 font-weight-bold\"\n }, \"Devwares\")), mdx(\"p\", {\n className: \"my-3\",\n style: {\n \"width\": \"250px\"\n }\n }, \"We are creating High Quality Resources and tools to Aid developers during the developement of their projects\")), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Devwares\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Resources\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"About Us\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Contact\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Blog\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\"))))), mdx(\"div\", {\n className: \"text-center mt-4\"\n }, mdx(\"div\", {\n className: \"mb-4\"\n }, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n }))), mdx(\"small\", null, \"\\xA9 Devwares, 2020. All rights reserved.\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n
\\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n

We are creating High Quality Resources and tools to Aid developers during the developement of their projects

\\n
\\n
\\n

Devwares

\\n
    \\n Resources\\n About Us\\n Contact\\n Blog\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n
\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n © Devwares, 2020. All rights reserved.\\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 4\"), mdx(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex flex-column mx-auto py-5\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between\"\n }, mdx(\"div\", {\n className: \"align-self-center\"\n }, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-4 h5 font-weight-bold\"\n }, \"Devwares\"))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Devwares\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Resources\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"About Us\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Contact\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Blog\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\"))))), mdx(\"div\", {\n className: \"d-flex justify-content-between align-items-center mt-4\"\n }, mdx(\"small\", null, \"\\xA9 Devwares, 2020. All rights reserved.\"), mdx(\"div\", null, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n })))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n
\\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n
\\n
\\n

Devwares

\\n
    \\n Resources\\n About Us\\n Contact\\n Blog\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n
\\n © Devwares, 2020. All rights reserved.\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 5\"), mdx(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between align-items-center mx-auto py-4 flex-wrap\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex align-items-center\"\n }, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-4 h5 mb-0 font-weight-bold\"\n }, \"Devwares\")), mdx(\"span\", {\n style: {\n \"fontSize\": \"3em\",\n \"margin\": \"-2rem 0px -1.5rem 1rem\",\n \"color\": \"#c4c4c4\"\n }\n }, \"\\u2022\"), mdx(\"small\", {\n className: \"ml-2\"\n }, \"\\xA9 Devwares, 2020. All rights reserved.\")), mdx(\"div\", null, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 6\"), mdx(\"footer\", {\n className: \"page-footer shadow\"\n }, mdx(\"div\", {\n className: \"d-flex flex-column mx-auto py-5\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between\"\n }, mdx(\"div\", {\n className: \"align-self-center\"\n }, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-4 h5 font-weight-bold\"\n }, \"Devwares\"))), mdx(\"div\", {\n className: \"d-flex justify-content-between\",\n style: {\n \"width\": \"40%\"\n }\n }, mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Devwares\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Resources\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"About Us\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Contact\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Blog\")))), mdx(\"div\", null, mdx(\"p\", {\n className: \"h5 mb-4\",\n style: {\n \"fontWeight\": \"600\"\n }\n }, \"Help\"), mdx(\"ul\", {\n className: \"p-0\",\n style: {\n \"listStyle\": \"none\",\n \"cursor\": \"pointer\"\n }\n }, mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Support\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign Up\")), mdx(\"li\", {\n className: \"my-2\"\n }, mdx(\"span\", null, \"Sign In\")))))), mdx(\"div\", {\n className: \"d-flex justify-content-between align-items-center mt-4\"\n }, mdx(\"small\", null, \"\\xA9 Devwares, 2020. All rights reserved.\"), mdx(\"div\", null, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n })))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n
\\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n
\\n
\\n
\\n

Devwares

\\n
    \\n Resources\\n About Us\\n Contact\\n Blog\\n
\\n
\\n
\\n

Help

\\n
    \\n Support\\n Sign Up\\n Sign In\\n
\\n
\\n
\\n
\\n
\\n © Devwares, 2020. All rights reserved.\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h2\", null, \"Example 7\"), mdx(\"footer\", {\n className: \"shadow\"\n }, mdx(\"div\", {\n className: \"d-flex justify-content-between align-items-center mx-auto py-4 flex-wrap\",\n style: {\n \"width\": \"80%\"\n }\n }, mdx(\"span\", {\n className: \"d-flex align-items-center p-0 text-dark\"\n }, mdx(\"img\", {\n alt: \"logo\",\n src: \"/img/logo.png\",\n width: \"30px\"\n }), mdx(\"span\", {\n className: \"ml-4 h5 font-weight-bold\"\n }, \"Devwares\")), mdx(\"small\", null, \"\\xA9 Devwares, 2020. All rights reserved.\"), mdx(\"div\", null, mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-facebook-f\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-twitter\"\n })), mdx(\"button\", {\n className: \"btn btn-dark btn-flat\"\n }, mdx(\"i\", {\n className: \"fab fa-instagram\"\n }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import React from \\\"react\\\";\\nimport { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Footer = () => {\\n return (\\n \\n \\n
\\n \\n \\\"logo\\\"\\n Devwares\\n \\n © Devwares, 2020. All rights reserved.\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Footer component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Footer Import Statement\"), mdx(\"p\", null, \"You need to import the proper component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-javascript\"\n }), \"import { CDBFooter, CDBFooterLink, CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Footer Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBFooter 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 }), \"className\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Adds custom classes\"), 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 }), \"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"function or String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"footer\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Changes default footer tag\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"\")), 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 }), \"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#footer","title":"Footer","items":[{"url":"#example-1","title":"Example 1"},{"url":"#example-2","title":"Example 2"},{"url":"#example-3","title":"Example 3"},{"url":"#example-4","title":"Example 4"},{"url":"#example-5","title":"Example 5"},{"url":"#example-6","title":"Example 6"},{"url":"#example-7","title":"Example 7"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-footer-import-statement","title":"Contrast Footer Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/footer.mdx"},"frontmatter":{"metaTitle":"Footer Component for Contrast Bootstrap React","metaDescription":"Building a Footer Component using the Contrast Bootstrap React Package"}},"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":"3297a528-7f25-58e8-8e36-e48bc969693d"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}