{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/notification","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"eefc7bfd-e84b-5d83-b96e-88db7b429c67","title":"Notification","slug":"/contrast/javascript/components/notification"},"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\": \"Notification\",\n  \"metaTitle\": \"Notification Component for Contrast Bootstrap \",\n  \"metaDescription\": \"Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message\"\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, \"Notification\"), mdx(\"p\", null, \"Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.\"), mdx(\"p\", null, \"Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They\\u2019re built with flexbox, so they\\u2019re easy to align and position.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Custom Notification Types\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/notification1.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"          <div class=\\\"notification mb-3\\\" id=\\\"dismiss1\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box\\\"><i class=\\\"fa fa-square\\\"></i></div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button\\n                  class=\\\"btn-close btn-close1\\\"\\n                  data-dismiss=\\\"toast\\\"\\n                ></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseOne\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseOne\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseOne\\\">\\n              Hello, world! This is a dismissible message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification\\\" id=\\\"dismiss2\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box\\\"><i class=\\\"fa fa-square\\\"></i></div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseOne\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseOne\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseOne\\\">\\n              Hello, world! This message will dissapear in 5 seconds.\\n            </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Change Color of Icon Box\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBNotification\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/notification2.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-info\\\">\\n                <i class=\\\"fa fa-square text-white\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseTwo\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseTwo\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseTwo\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-danger\\\">\\n                <i class=\\\"fa fa-square text-white\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseThree\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseThree\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseThree\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-secondary\\\">\\n                <i class=\\\"fa fa-square text-white\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseFour\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseFour\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseFour\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Notification with Icons\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBNotification\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/notification3.png\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"         <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-dark\\\">\\n                <i class=\\\"fa fa-cut text-white\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseFive\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseFive\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseFive\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-dark\\\">\\n                <i class=\\\"fa fa-car text-primary\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseSix\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseSix\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseSix\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-dark\\\">\\n                <i class=\\\"fa fa-compass text-danger\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseSeven\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseSeven\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseSeven\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\\n          <div class=\\\"notification mb-3\\\">\\n            <div class=\\\"notification-header\\\">\\n              <div class=\\\"icon-box bg-dark\\\">\\n                <i class=\\\"fa fa-train text-success\\\"></i>\\n              </div>\\n              <div class=\\\"d-flex flex-column\\\">\\n                <strong class=\\\"ml-3\\\">Contrast</strong>\\n                <small class=\\\"ml-3 small-text\\\">11 mins ago</small>\\n              </div>\\n              <button type=\\\"button\\\" class=\\\"btn p-0 ml-auto h-25\\\">\\n                <button class=\\\"btn-close\\\" data-dismiss=\\\"toast\\\"></button>\\n              </button>\\n              <div class=\\\"toggle\\\">\\n                <span\\n                  data-toggle=\\\"collapse\\\"\\n                  data-target=\\\"#collapseEight\\\"\\n                  aria-expanded=\\\"true\\\"\\n                  aria-controls=\\\"collapseEight\\\"\\n                ></span>\\n              </div>\\n            </div>\\n            <div class=\\\"notification-message\\\" id=\\\"collapseEight\\\">\\n              Hello, world! This is a primary message.\\n            </div>\\n          </div>\\n\")), mdx(\"h6\", null, \"Script\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"    <script src=\\\"../build/cdbbootstrap.js\\\"></script>\\n    <script>\\n      var toastElList = [].slice.call(\\n        document.querySelectorAll('.notification'),\\n      );\\n      var toastList = toastElList.map(function (toastEl) {\\n        return new CDB.Notification(toastEl, { sticky: true });\\n      });\\n\\n      const notificationId = document.querySelector('#dismiss1');\\n      const notification1 = new CDB.Notification(notificationId, {\\n        sticky: true,\\n        visibleDuration: 2000,\\n      });\\n      const notificationId2 = document.querySelector('#dismiss2');\\n      const notification2 = new CDB.Notification(notificationId2, {\\n        sticky: false,\\n        visibleDuration: 2000,\\n      });\\n    </script>\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#notification","title":"Notification","items":[{"url":"#custom-notification-types","title":"Custom Notification Types","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#change-color-of-icon-box","title":"Change Color of Icon Box","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#notification-with-icons","title":"Notification with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"},{"url":"#script","title":"Script"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/notification.md"},"frontmatter":{"metaTitle":"Notification Component for Contrast Bootstrap ","metaDescription":"Bootstrap Push notifications to your visitors with a toast, a lightweight and easily customizable alert message"}},"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":"eefc7bfd-e84b-5d83-b96e-88db7b429c67"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}