{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/box","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"98d704ee-fdfd-5cdc-8321-4d844c2add55","title":"Box","slug":"/contrast/angular/components/box"},"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\": \"Box\",\n  \"metaTitle\": \"Box Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap boxes are layout components which help to write build components for of the CSS utility needs\"\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, \"Box\"), mdx(\"p\", null, \"Angular Bootstrap boxes are layout components which help to write build components for of the CSS utility needs.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Box component can be any component from ElementType like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"span\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"img\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"video\"), \" etc. The basic component is a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \".\"), 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/0a49b7ac963cfdfbf4adbda32df3759a/2c118/basicbox.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\": \"9.266409266409267%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAHElEQVQI12P48+fvfxD49+8fGFMKGH78+ElVAwFgoJ85VOYUpQAAAABJRU5ErkJggg==')\",\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/0a49b7ac963cfdfbf4adbda32df3759a/e3189/basicbox.png\",\n    \"srcSet\": [\"/static/0a49b7ac963cfdfbf4adbda32df3759a/a2ead/basicbox.png 259w\", \"/static/0a49b7ac963cfdfbf4adbda32df3759a/6b9fd/basicbox.png 518w\", \"/static/0a49b7ac963cfdfbf4adbda32df3759a/e3189/basicbox.png 1035w\", \"/static/0a49b7ac963cfdfbf4adbda32df3759a/2c118/basicbox.png 1505w\"],\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  }), \"<CDBBox tag=\\\"span\\\">\\n  Span\\n</CDBBox>\\n<CDBBox tag=\\\"div\\\">\\n  Div\\n</CDBBox>\\n<CDBBox tag=\\\"p\\\">\\n  Paragraph\\n</CDBBox>\\n<CDBBox tag=\\\"section\\\">\\n  Section\\n</CDBBox>\\n\")), mdx(\"h2\", null, \"Display\"), mdx(\"p\", null, \"With CDBox component you can set any display CSS style from Bootstrap 4 to CDBox component like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"d-none\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"d-flex\"), \" etc.\"), 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/0a99cd0495ad55efe68f1bc93c2069e8/f663d/boxdisplay.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.177606177606178%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAGklEQVQI12N4/fr1//cfPvwHgX///oExJQAAethPQbmM67sAAAAASUVORK5CYII=')\",\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/0a99cd0495ad55efe68f1bc93c2069e8/e3189/boxdisplay.png\",\n    \"srcSet\": [\"/static/0a99cd0495ad55efe68f1bc93c2069e8/a2ead/boxdisplay.png 259w\", \"/static/0a99cd0495ad55efe68f1bc93c2069e8/6b9fd/boxdisplay.png 518w\", \"/static/0a99cd0495ad55efe68f1bc93c2069e8/e3189/boxdisplay.png 1035w\", \"/static/0a99cd0495ad55efe68f1bc93c2069e8/f663d/boxdisplay.png 1511w\"],\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  }), \"<CDBBox display=\\\"flex\\\">\\n  Display Flex\\n</CDBBox>\\n<CDBBox display=\\\"block\\\">\\n  Display Block\\n</CDBBox>\\n<CDBBox display=\\\"none\\\">\\n  Dislpay None\\n</CDBBox>\\n<CDBBox display=\\\"inline\\\">\\n  Display Inline\\n</CDBBox>\\n\")), mdx(\"h2\", null, \"Flex\"), mdx(\"p\", null, \"With CDBox component you can set flexbox CSS styles to this component and render it on your website. You can use props \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"justifyContent\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"flex\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignItems\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignContent\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alignSelf\"), \".\"), 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/ff936de97d5469fa45c8527b844b165a/a4f81/boxflex.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\": \"16.216216216216214%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABJ0AAASdAHeZh94AAAATElEQVQI13VOAQrAQAjq/7/dBUVc5ehg0GITBCsxKTNRLExdcHeIyGHp7ns8e2+oKswMxMwvY8ec+24+r4yIAF1rnfS/hr3NvH09vQHL6+3S+NfFDQAAAABJRU5ErkJggg==')\",\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/ff936de97d5469fa45c8527b844b165a/e3189/boxflex.png\",\n    \"srcSet\": [\"/static/ff936de97d5469fa45c8527b844b165a/a2ead/boxflex.png 259w\", \"/static/ff936de97d5469fa45c8527b844b165a/6b9fd/boxflex.png 518w\", \"/static/ff936de97d5469fa45c8527b844b165a/e3189/boxflex.png 1035w\", \"/static/ff936de97d5469fa45c8527b844b165a/a4f81/boxflex.png 1508w\"],\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  }), \"<CDBBox display=\\\"flex\\\" justifyContent=\\\"center\\\">\\n  Justify Content Center\\n</CDBBox>\\n<CDBBox display=\\\"flex\\\" justifyContent=\\\"end\\\">\\n  Justify Content End\\n</CDBBox>\\n<CDBBox display=\\\"flex\\\" flex=\\\"column\\\">\\n  <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n  <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n  <CDBBox tag=\\\"p\\\">Column</CDBBox>\\n</CDBBox>\\n<CDBBox display=\\\"flex\\\" flex=\\\"row\\\">\\n  <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n  <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n  <CDBBox tag=\\\"p\\\">Row</CDBBox>\\n</CDBBox>\\n<CDBBox display=\\\"none\\\">\\n  <CDBBox display=\\\"flex\\\" flex=\\\"fill\\\">\\n    <CDBBox tag=\\\"p\\\">Fill</CDBBox>\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" flex=\\\"row\\\" alignItems=\\\"start\\\">\\n    Align Items Start\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" flex=\\\"row\\\" alignItems=\\\"center\\\">\\n    Align Items Center\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" alignContent=\\\"start\\\">\\n    Align Content Start\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" alignContent=\\\"center\\\">\\n    Align Content Center\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" alignSelf=\\\"start\\\">\\n    Align Self Start\\n  </CDBBox>\\n  <CDBBox display=\\\"flex\\\" alignSelf=\\\"center\\\">\\n    Align Self Center\\n  </CDBBox>\\n</CDBBox>\\n\")), mdx(\"h2\", null, \"Colors\"), mdx(\"p\", null, \"With CDBox component you can set text CSS colors to element between \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBox\"), \" component.\"), 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/210a12a8fecc8bc47f4ef5a1d614377d/b880f/boxcolor.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\": \"8.494208494208493%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAFklEQVQI12P4DwT//v0DY2oABmobCABrnp9V4rJ4BQAAAABJRU5ErkJggg==')\",\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/210a12a8fecc8bc47f4ef5a1d614377d/e3189/boxcolor.png\",\n    \"srcSet\": [\"/static/210a12a8fecc8bc47f4ef5a1d614377d/a2ead/boxcolor.png 259w\", \"/static/210a12a8fecc8bc47f4ef5a1d614377d/6b9fd/boxcolor.png 518w\", \"/static/210a12a8fecc8bc47f4ef5a1d614377d/e3189/boxcolor.png 1035w\", \"/static/210a12a8fecc8bc47f4ef5a1d614377d/b880f/boxcolor.png 1507w\"],\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  }), \"<CDBBox color=\\\"red\\\">\\n  Red Color\\n</CDBBox>\\n<CDBBox color=\\\"green\\\">\\n  Green Color\\n</CDBBox>\\n<CDBBox color=\\\"blue\\\">\\n  Blue Color\\n</CDBBox>\\n<CDBBox color=\\\"pink\\\">\\n  Pink Color\\n</CDBBox>\\n\")), mdx(\"h2\", null, \"Background Colors\"), mdx(\"p\", null, \"With CDBox component you can set background CSS colors to element to CDBox component.\"), 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/88a97fcd0ccae3db9507934026f0c79d/c211c/boxbackgroundcolors.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\": \"8.108108108108107%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAKElEQVQI12NIqm7/H1XS+D+6tOl/dAmFGGgGw5ue+P9vu2OBOI4qGADjMWb4T8b97AAAAABJRU5ErkJggg==')\",\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/88a97fcd0ccae3db9507934026f0c79d/e3189/boxbackgroundcolors.png\",\n    \"srcSet\": [\"/static/88a97fcd0ccae3db9507934026f0c79d/a2ead/boxbackgroundcolors.png 259w\", \"/static/88a97fcd0ccae3db9507934026f0c79d/6b9fd/boxbackgroundcolors.png 518w\", \"/static/88a97fcd0ccae3db9507934026f0c79d/e3189/boxbackgroundcolors.png 1035w\", \"/static/88a97fcd0ccae3db9507934026f0c79d/c211c/boxbackgroundcolors.png 1502w\"],\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  }), \"<CDBBox bg=\\\"success\\\">\\n  Success Background\\n</CDBBox>\\n<CDBBox bg=\\\"secondary\\\">\\n  Secondary Background\\n</CDBBox>\\n<CDBBox bg=\\\"danger\\\">\\n  Danger Background\\n</CDBBox>\\n<CDBBox bg=\\\"warning\\\">\\n  Warning Background\\n</CDBBox>\\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 Box Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {BoxModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Box Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Box 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  }), \"Change color of text in the CDBox component. Choose one of these from CDB: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"red\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pink\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"purple\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"deep-purple\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"indigo\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cyan\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"teal\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"yellow\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"amber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"deep-orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"brown\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue-grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cdb-color white\"), \". You can also chose default colors from Bootstrap like: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default,\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dark\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"muted\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"pink\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignContent\"), 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  }), \"Set align-content class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"around\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"alignContent=\\\"start\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignItems\"), 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  }), \"Set align-items class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"alignItems=\\\"start\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"alignSelf\"), 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  }), \"Set align-self class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stretch\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"alignSelf=\\\"start\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"bg\"), 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  }), \"Sets background color of the box component. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dark\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"bg=\\\"light\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"display\"), 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  }), \"Set display to element. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"none\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline-block\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"block\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table-row\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"table-cell\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inline-flex\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"display=\\\"inline\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"flex\"), 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  }), \"Set flex class to children of CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"row\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"column\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"row-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"column-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wrap\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"nowrap\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"wrap-reverse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fill\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grow-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grow-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shrink-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shrink-1\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"flex=\\\"column\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"justifyContent\"), 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  }), \"Set justify-content to children od CDBox. Choose one of these: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"between\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"around\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"justifyContent=\\\"start\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"m\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"With margin you can set margin top/bottom/right/left/x/y from 0 to 5.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"m=5 , mt=1 ,  mb=4 , my=2 , mx=4\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"p\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"With padding you can set padding top/bottom/right/left/x/y from 0 to 5.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"p=5 , pt=1 , pb=4 , py=2 , px=4\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#box","title":"Box","items":[{"url":"#examples","title":"Examples","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"HTML"}]}]}]}]},{"url":"#display","title":"Display","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#flex","title":"Flex","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#colors","title":"Colors","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#background-colors","title":"Background Colors","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-box-bootstrap-modules-used","title":"Contrast Box Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/box.md"},"frontmatter":{"metaTitle":"Box Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap boxes are layout components which help to write build components for of the CSS utility needs"}},"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":"98d704ee-fdfd-5cdc-8321-4d844c2add55"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}