{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/panels","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"22acd98b-b45b-515b-893a-47a9143ac852","title":"Panel","slug":"/contrast/javascript/components/panels"},"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\": \"Panel\",\n  \"metaTitle\": \"Panel Component for Contrast Bootstrap \",\n  \"metaDescription\": \"Bootstrap Panels are the flexible and extensible content containers with multiple variants, which include a wide variety of content, contextual background colors, and powerful display options\"\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, \"Panel\"), mdx(\"p\", null, \"Bootstrap Panels are the flexible and extensible content containers with multiple variants, which include a wide variety of content, contextual background colors, and powerful display options. Panels are similar to cards, but they don't include media.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Dropdown\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/panelwithdropdown.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=\\\"panel\\\" style=\\\"width: 25rem\\\">\\n                <div class=\\\"panel-body\\\">\\n\\n                  <div class=\\\"pane d-flex align-items-center mt-0 mb-3\\\">\\n                    <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                    <div class=\\\"ml-3\\\">\\n                      <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                      <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                    </div>\\n\\n                    <div class=\\\"dropdown p-0 ml-auto pane-item\\\">\\n                      <i \\n                        class=\\\"fa fa-ellipsis-h display-1\\\"\\n                        id=\\\"dropdownMenuButton\\\"\\n                        data-toggle=\\\"dropdown\\\"  \\n                        aria-expanded=\\\"false\\\">\\n                      </i>\\n                      <ul class=\\\"dropdown-menu\\\" aria-labelledby=\\\"dropdownMenuButton\\\">\\n                        <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Action</a></li>\\n                        <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Another action</a></li>\\n                        <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Something else here</a></li>\\n                      </ul>\\n                    </div>\\n                    \\n                  </div>\\n\\n                  <div class=\\\"card-text\\\">\\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \\n                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \\n                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\\n                  </div>\\n                 \\n                </div>\\n            </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Users\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/panelwithusers.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=\\\"panel\\\" style=\\\"width: 25rem\\\">\\n                <div class=\\\"panel-img\\\">\\n                  <img src=\\\"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg\\\" alt=\\\"\\\"/> \\n                </div>\\n                <div class=\\\"panel-body\\\">\\n                  <div class=\\\"panel-title \\\">\\n                    Bristol\\n                  </div>\\n                  <div class=\\\"panel-text\\\">\\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\\n                    tempor incididunt ut labore et dolore magna aliqua.\\n                  </div>\\n                  <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\"/>\\n                  <img class=\\\"pane-img\\\" src=\\\"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU\\\"/>\\n                  <img class=\\\"pane-img\\\" src=\\\"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU\\\"/>\\n                  \\n                </div>\\n            </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Label\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/panelwithlabel.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=\\\"panel\\\" style=\\\"width: 25rem\\\">\\n                <div class=\\\"panel-body\\\">\\n                  <div class=\\\"panel-label\\\">\\n                    <div class=\\\"badge badge-flat bg-secondary\\\">Label 1</div>\\n                    <div class=\\\"badge badge-flat bg-warning\\\">Label 2</div>\\n                    <div class=\\\"badge badge-flat bg-danger\\\">Label 3</div>\\n                  </div>\\n                  <div class=\\\"panel-title \\\">\\n                    Moon Fever\\n                  </div>\\n                  <div class=\\\"panel-text\\\">\\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\\n                    tempor incididunt ut labore et dolore magna aliqua.\\n                  </div>\\n                  <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\"/>\\n                  <img class=\\\"pane-img\\\" src=\\\"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU\\\"/>\\n                  \\n                </div>\\n            </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pane List\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/panellist.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=\\\"panel\\\" style=\\\"width: 25rem\\\">\\n            <div class=\\\"panel-body\\\">\\n              <div class=\\\"d-flex justify-content-between align-item-center mb-1\\\">\\n                <p class=\\\"mb-0\\\">My Messages</p>\\n                <div class=\\\"dropdown p-0\\\">\\n                  <i \\n                    class=\\\"fa fa-ellipsis-h display-1\\\"\\n                    id=\\\"dropdownMenuButton\\\"\\n                    data-toggle=\\\"dropdown\\\"  \\n                    aria-expanded=\\\"false\\\">\\n                  </i>\\n                  <ul class=\\\"dropdown-menu\\\" aria-labelledby=\\\"dropdownMenuButton\\\">\\n                    <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Action</a></li>\\n                    <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Another action</a></li>\\n                    <li><a class=\\\"dropdown-item\\\" href=\\\"#\\\">Something else here</a></li>\\n                  </ul>\\n                </div>\\n              </div>\\n\\n              <div class=\\\"pane d-flex align-items-center\\\">\\n                <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                <div class=\\\"ml-3\\\">\\n                  <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                  <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                </div>\\n                <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n              </div>\\n\\n              <div class=\\\"pane d-flex align-items-center\\\">\\n                <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                <div class=\\\"ml-3\\\">\\n                  <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                  <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                </div>\\n                <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n              </div>\\n\\n              <div class=\\\"pane d-flex align-items-center\\\">\\n                <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                <div class=\\\"ml-3\\\">\\n                  <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                  <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                </div>\\n                <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n              </div>\\n\\n              <div class=\\\"pane d-flex align-items-center\\\">\\n                <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                <div class=\\\"ml-3\\\">\\n                  <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                  <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                </div>\\n                <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n              </div>\\n\\n              <div class=\\\"pane d-flex align-items-center\\\">\\n                <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                <div class=\\\"ml-3\\\">\\n                  <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                  <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                </div>\\n                <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n              </div>\\n            </div>\\n          </div>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Panel with Progress\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"./images/panelwithprogress.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=\\\"panel\\\" style=\\\"width: 25rem\\\">\\n                <div class=\\\"panel-body\\\">\\n                  <div class=\\\"pane d-flex align-items-center mt-0\\\">\\n                    <img class=\\\"pane-img\\\" src=\\\"https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170\\\" alt=\\\"\\\"/>\\n                    <div class=\\\"ml-3\\\">\\n                      <h6 class=\\\"m-0\\\" style=\\\"font-weight:600;\\\">Warren Briggs</h6>\\n                      <p class=\\\"m-0 pane-item\\\">Cooking</p>\\n                    </div>\\n                    <p class=\\\"ml-auto pane-item\\\">5mins Ago</p>\\n                  </div>\\n\\n                  <div class=\\\"progress-container\\\">\\n                    <div class=\\\"progress-text pane-item\\\">Instagram</div>\\n                    <div\\n                      class=\\\"progress progress-primary\\\"\\n                      role=\\\"progress\\\"\\n                      min=\\\"0\\\"\\n                      max=\\\"100\\\"\\n                      value=\\\"20\\\"\\n                    >\\n                      <div class=\\\"progress-bar\\\"></div>\\n                    </div>\\n                  </div>\\n                  \\n                  <div class=\\\"progress-container\\\">\\n                    <div class=\\\"progress-text progress-text-secondary\\\">Twitter</div>\\n                    <div\\n                      class=\\\"progress progress-secondary\\\"\\n                      role=\\\"progress\\\"\\n                      min=\\\"0\\\"\\n                      max=\\\"100\\\"\\n                      value=\\\"30\\\"\\n                    >\\n                      <div class=\\\"progress-bar\\\"></div>\\n                    </div>\\n                  </div>\\n        \\n                  <div class=\\\"progress-container\\\">\\n                    <div class=\\\"progress-text progress-text-danger\\\">Facebook</div>\\n                    <div\\n                      class=\\\"progress progress-danger\\\"\\n                      role=\\\"progress\\\"\\n                      min=\\\"0\\\"\\n                      max=\\\"100\\\"\\n                      value=\\\"80\\\"\\n                    >\\n                      <div class=\\\"progress-bar\\\"></div>\\n                    </div>\\n                  </div>\\n\\n                </div>\\n            </div>\\n        </div>\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#panel","title":"Panel","items":[{"url":"#panel-with-dropdown","title":"Panel with Dropdown","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#panel-with-users","title":"Panel with Users","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#panel-with-label","title":"Panel with Label","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#pane-list","title":"Pane List","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#panel-with-progress","title":"Panel with Progress","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/panels.md"},"frontmatter":{"metaTitle":"Panel Component for Contrast Bootstrap ","metaDescription":"Bootstrap Panels are the flexible and extensible content containers with multiple variants, which include a wide variety of content, contextual background colors, and powerful display options"}},"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":"22acd98b-b45b-515b-893a-47a9143ac852"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}