text: (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["views-buttons-buttons-module"],{
  
  /***/ "2W4T":
  /*!**********************************************************************************************!*\
    !*** ./node_modules/raw-loader/dist/cjs.js!./src/app/views/buttons/dropdowns.component.html ***!
    \**********************************************************************************************/
  /*! exports provided: default */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony default export */ __webpack_exports__["default"] = ("<div class=\"animated fadeIn\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Bootstrap Dropdowns\n          <div class=\"card-header-actions\">\n            <a href=\"https://valor-software.com/ngx-bootstrap/#/dropdowns\" target=\"_blank\">\n              <small className=\"text-muted\">docs</small>\n            </a>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown>\n            <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\">\n              Button dropdown <span class=\"caret\"></span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>trigger by <code>&lt;a&gt;</code></small>\n        </div>\n        <div class=\"card-body\">\n      <span dropdown (onShown)=\"onShown()\" (onHidden)=\"onHidden()\" (isOpenChange)=\"isOpenChange()\">\n        <a href dropdownToggle (click)=\"false\">Click me for a dropdown, yo!</a>\n          <ul *dropdownMenu class=\"dropdown-menu\">\n            <li *ngFor=\"let choice of items\">\n              <a class=\"dropdown-item\" href=\"#\">{{choice}}</a>\n            </li>\n          </ul>\n      </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>split button</small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown>\n            <button type=\"button\" class=\"btn btn-danger\">Action</button>\n            <button type=\"button\" dropdownToggle class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\">\n              <span class=\"caret\"></span>\n              <span class=\"sr-only\">Split button!</span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a>\n              </li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else\n                here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>manual triggers</small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown [isOpen]=\"status.isOpen\" (isOpenChange)=\"change($event)\" placement=\"top\">\n            <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\">\n              Button dropdown <span class=\"caret\"></span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a>\n              </li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else\n                here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n              </li>\n            </ul>\n          </div>\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleDropdown($event)\">Toggle</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>disabled menu</small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown [isDisabled]=\"disabled\">\n            <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdownToggle\">\n              Button dropdown <span class=\"caret\"></span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a>\n              </li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else\n                here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n              </li>\n            </ul>\n          </div>\n          <button type=\"button\" class=\"btn btn-warning\" (click)=\"disabled = !disabled\">\n            Enable/Disable\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>menu alignment</small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown placement=\"bottom right\">\n            <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\">\n              This menu is right-aligned <span class=\"caret\"></span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu dropdown-menu-right\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small>dropup variation</small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown [dropup]=\"isDropup\">\n            <button id=\"button-dropup\" dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\">\n              Dropup <span class=\"caret\"></span>\n            </button>\n            <ul id=\"dropdown-dropup\" *dropdownMenu class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"button-dropup\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a>\n              </li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else\n                here</a></li>\n              <li class=\"divider dropdown-divider\"></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Separated link</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"card-footer\">\n          <div class=\"checkbox\">\n            <label>\n              <input type=\"checkbox\" value=\"true\" [(ngModel)]=\"isDropup\"\n                     style=\"display: inline-block;\">\n              {{ isDropup ? 'Is dropup' : 'Is dropdown' }}\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          Dropdowns\n          <small> with <code>autoClose</code></small>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"btn-group\" dropdown [autoClose]=\"autoClose\">\n            <button dropdownToggle type=\"button\" class=\"btn btn-primary dropdown-toggle\">\n              Button dropdown <span class=\"caret\"></span>\n            </button>\n            <ul *dropdownMenu class=\"dropdown-menu\" role=\"menu\">\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Action</a></li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Another action</a>\n              </li>\n              <li role=\"menuitem\"><a class=\"dropdown-item\" href=\"#\">Something else\n                here</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n");
  
  /***/ }),
  
  /***/ "5EjJ":
  /*!**********************************************************!*\
    !*** ./src/app/views/buttons/brand-buttons.component.ts ***!
    \**********************************************************/
  /*! exports provided: BrandButtonsComponent */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BrandButtonsComponent", function() { return BrandButtonsComponent; });
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "mrSG");
  /* harmony import */ var _raw_loader_brand_buttons_component_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! raw-loader!./brand-buttons.component.html */ "sJ7Y");
  /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ "8Y7J");
  
  
  
  let BrandButtonsComponent = class BrandButtonsComponent {
      constructor() { }
  };
  BrandButtonsComponent.ctorParameters = () => [];
  BrandButtonsComponent = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
      Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"])({
          template: _raw_loader_brand_buttons_component_html__WEBPACK_IMPORTED_MODULE_1__["default"]
      }),
      Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [])
  ], BrandButtonsComponent);
  
  
  
  /***/ }),
  
  /***/ "QF1n":
  /*!******************************************************!*\
    !*** ./src/app/views/buttons/dropdowns.component.ts ***!
    \******************************************************/
  /*! exports provided: DropdownsComponent */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DropdownsComponent", function() { return DropdownsComponent; });
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "mrSG");
  /* harmony import */ var _raw_loader_dropdowns_component_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! raw-loader!./dropdowns.component.html */ "2W4T");
  /* harmony import */ var _dropdowns_component_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dropdowns.component.css */ "S6b1");
  /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/core */ "8Y7J");
  
  
  
  
  let DropdownsComponent = class DropdownsComponent {
      constructor() {
          this.status = { isOpen: false };
          this.disabled = false;
          this.isDropup = true;
          this.autoClose = false;
          this.items = [
              'The first choice!',
              'And another choice for you.',
              'but wait! A third!'
          ];
      }
      ngOnDestroy() {
          this.status.isOpen = false;
      }
      onHidden() {
          console.log('Dropdown is hidden');
      }
      onShown() {
          console.log('Dropdown is shown');
      }
      isOpenChange() {
          console.log('Dropdown state is changed');
      }
      toggleDropdown($event) {
          $event.preventDefault();
          $event.stopPropagation();
          this.status.isOpen = !this.status.isOpen;
      }
      change(value) {
          this.status.isOpen = value;
      }
  };
  DropdownsComponent.ctorParameters = () => [];
  DropdownsComponent = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
      Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["Component"])({
          template: _raw_loader_dropdowns_component_html__WEBPACK_IMPORTED_MODULE_1__["default"],
          styles: [_dropdowns_component_css__WEBPACK_IMPORTED_MODULE_2__["default"]]
      }),
      Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [])
  ], DropdownsComponent);
  
  
  
  /***/ }),
  
  /***/ "Reju":
  /*!*************************************************!*\
    !*** ./src/app/views/buttons/buttons.module.ts ***!
    \*************************************************/
  /*! exports provided: ButtonsModule */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonsModule", function() { return ButtonsModule; });
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "mrSG");
  /* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/common */ "SVse");
  /* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/forms */ "s7LF");
  /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/core */ "8Y7J");
  /* harmony import */ var _buttons_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./buttons.component */ "xtqT");
  /* harmony import */ var _brand_buttons_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./brand-buttons.component */ "5EjJ");
  /* harmony import */ var ngx_bootstrap_dropdown__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ngx-bootstrap/dropdown */ "FE24");
  /* harmony import */ var _dropdowns_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./dropdowns.component */ "QF1n");
  /* harmony import */ var _buttons_routing_module__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./buttons-routing.module */ "bAeT");
  
  
  
  
  
  
  // Dropdowns Component
  
  
  // Buttons Routing
  
  // Angular
  let ButtonsModule = class ButtonsModule {
  };
  ButtonsModule = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
      Object(_angular_core__WEBPACK_IMPORTED_MODULE_3__["NgModule"])({
          imports: [
              _angular_common__WEBPACK_IMPORTED_MODULE_1__["CommonModule"],
              _buttons_routing_module__WEBPACK_IMPORTED_MODULE_8__["ButtonsRoutingModule"],
              ngx_bootstrap_dropdown__WEBPACK_IMPORTED_MODULE_6__["BsDropdownModule"].forRoot(),
              _angular_forms__WEBPACK_IMPORTED_MODULE_2__["FormsModule"]
          ],
          declarations: [
              _buttons_component__WEBPACK_IMPORTED_MODULE_4__["ButtonsComponent"],
              _dropdowns_component__WEBPACK_IMPORTED_MODULE_7__["DropdownsComponent"],
              _brand_buttons_component__WEBPACK_IMPORTED_MODULE_5__["BrandButtonsComponent"]
          ]
      })
  ], ButtonsModule);
  
  
  
  /***/ }),
  
  /***/ "S6b1":
  /*!*******************************************************!*\
    !*** ./src/app/views/buttons/dropdowns.component.css ***!
    \*******************************************************/
  /*! exports provided: default */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony default export */ __webpack_exports__["default"] = (".dropup .dropdown-menu {\n  /*transform: none!important;*/\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3ducy5jb21wb25lbnQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkJBQTZCO0FBQy9CIiwiZmlsZSI6ImRyb3Bkb3ducy5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmRyb3B1cCAuZHJvcGRvd24tbWVudSB7XG4gIC8qdHJhbnNmb3JtOiBub25lIWltcG9ydGFudDsqL1xufVxuIl19 */");
  
  /***/ }),
  
  /***/ "bAeT":
  /*!*********************************************************!*\
    !*** ./src/app/views/buttons/buttons-routing.module.ts ***!
    \*********************************************************/
  /*! exports provided: ButtonsRoutingModule */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonsRoutingModule", function() { return ButtonsRoutingModule; });
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "mrSG");
  /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "8Y7J");
  /* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/router */ "iInd");
  /* harmony import */ var _buttons_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./buttons.component */ "xtqT");
  /* harmony import */ var _dropdowns_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./dropdowns.component */ "QF1n");
  /* harmony import */ var _brand_buttons_component__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./brand-buttons.component */ "5EjJ");
  
  
  
  
  
  
  const routes = [
      {
          path: '',
          data: {
              title: 'Buttons'
          },
          children: [
              {
                  path: '',
                  redirectTo: 'buttons'
              },
              {
                  path: 'buttons',
                  component: _buttons_component__WEBPACK_IMPORTED_MODULE_3__["ButtonsComponent"],
                  data: {
                      title: 'Buttons'
                  }
              },
              {
                  path: 'dropdowns',
                  component: _dropdowns_component__WEBPACK_IMPORTED_MODULE_4__["DropdownsComponent"],
                  data: {
                      title: 'Dropdowns'
                  }
              },
              {
                  path: 'brand-buttons',
                  component: _brand_buttons_component__WEBPACK_IMPORTED_MODULE_5__["BrandButtonsComponent"],
                  data: {
                      title: 'Brand buttons'
                  }
              }
          ]
      }
  ];
  let ButtonsRoutingModule = class ButtonsRoutingModule {
  };
  ButtonsRoutingModule = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
      Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["NgModule"])({
          imports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__["RouterModule"].forChild(routes)],
          exports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__["RouterModule"]]
      })
  ], ButtonsRoutingModule);
  
  
  
  /***/ }),
  
  /***/ "sJ7Y":
  /*!**************************************************************************************************!*\
    !*** ./node_modules/raw-loader/dist/cjs.js!./src/app/views/buttons/brand-buttons.component.html ***!
    \**************************************************************************************************/
  /*! exports provided: default */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony default export */ __webpack_exports__["default"] = ("<div class=\"animated fadeIn\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <strong>Brand Buttons</strong>\n          <small>Usage ex.</small>\n          <code style=\"text-transform:lowercase\">&lt;button class=\"btn btn-brand btn-facebook\"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>\n        </div>\n        <div class=\"card-body\">\n          <h6>Size Small\n            <small>Add this class\n              <code>.btn-sm</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n              <span>Vimeo</span>\n            </button>\n          </p>\n          <h6>Size Normal</h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n              <span>Vimeo</span>\n            </button>\n          </p>\n          <h6>Size Large\n            <small>Add this class\n              <code>.btn-lg</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n              <span>Vimeo</span>\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n    <!--/.col-->\n\n    <div class=\"col-12\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <strong>Brand Buttons</strong>\n          <small>Only icons. Usage ex.</small>\n          <code style=\"text-transform:lowercase\">&lt;button class=\"btn btn-brand btn-facebook\"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>\n        </div>\n        <div class=\"card-body\">\n          <h6>Size Small\n            <small>Add this class\n              <code>.btn-sm</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n            </button>\n          </p>\n          <h6>Size Normal</h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n            </button>\n          </p>\n          <h6>Size Large\n            <small>Add this class\n              <code>.btn-lg</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-facebook\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-twitter\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-linkedin\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-flickr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-tumblr\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-xing\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-github\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-html5\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-openid\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-stack-overflow\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-css3\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-youtube\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dribbble\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-google-plus\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-instagram\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-pinterest\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vk\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-yahoo\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-behance\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-dropbox\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-reddit\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-spotify\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vine\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-foursquare\"></i>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <i class=\"fa fa-vimeo\"></i>\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n    <!--/.col-->\n\n    <div class=\"col-12\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <strong>Brand Buttons</strong>\n          <small>Only text. Usage ex.</small>\n          <code style=\"text-transform:lowercase\">&lt;button class=\"btn btn-brand btn-facebook text\"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>\n        </div>\n        <div class=\"card-body\">\n          <h6>Size Small\n            <small>Add this class\n              <code>.btn-sm</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-sm btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vimeo</span>\n            </button>\n          </p>\n          <h6>Size Normal</h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vimeo</span>\n            </button>\n          </p>\n          <h6>Size Large\n            <small>Add this class\n              <code>.btn-lg</code>\n            </small>\n          </h6>\n          <p>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-facebook mr-1\" style=\"margin-bottom: 4px\">\n              <span>Facebook</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-twitter mr-1\" style=\"margin-bottom: 4px\">\n              <span>Twitter</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-linkedin mr-1\" style=\"margin-bottom: 4px\">\n              <span>LinkedIn</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-flickr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Flickr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-tumblr mr-1\" style=\"margin-bottom: 4px\">\n              <span>Tumblr</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-xing mr-1\" style=\"margin-bottom: 4px\">\n              <span>Xing</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-github mr-1\" style=\"margin-bottom: 4px\">\n              <span>Github</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-html5 mr-1\" style=\"margin-bottom: 4px\">\n              <span>HTML5</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-openid mr-1\" style=\"margin-bottom: 4px\">\n              <span>OpenID</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-stack-overflow mr-1\" style=\"margin-bottom: 4px\">\n              <span>StackOverflow</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-css3 mr-1\" style=\"margin-bottom: 4px\">\n              <span>CSS3</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-youtube mr-1\" style=\"margin-bottom: 4px\">\n              <span>YouTube</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dribbble mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dribbble</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-google-plus mr-1\" style=\"margin-bottom: 4px\">\n              <span>Google+</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-instagram mr-1\" style=\"margin-bottom: 4px\">\n              <span>Instagram</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-pinterest mr-1\" style=\"margin-bottom: 4px\">\n              <span>Pinterest</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vk mr-1\" style=\"margin-bottom: 4px\">\n              <span>VK</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-yahoo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Yahoo</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-behance mr-1\" style=\"margin-bottom: 4px\">\n              <span>Behance</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-dropbox mr-1\" style=\"margin-bottom: 4px\">\n              <span>Dropbox</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-reddit mr-1\" style=\"margin-bottom: 4px\">\n              <span>Reddit</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-spotify mr-1\" style=\"margin-bottom: 4px\">\n              <span>Spotify</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vine mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vine</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-foursquare mr-1\" style=\"margin-bottom: 4px\">\n              <span>Forsquare</span>\n            </button>\n            <button type=\"button\" class=\"btn btn-brand btn-lg btn-vimeo mr-1\" style=\"margin-bottom: 4px\">\n              <span>Vimeo</span>\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n    <!--/.col-->\n  </div>\n  <!--/.row-->\n</div>\n");
  
  /***/ }),
  
  /***/ "sgt0":
  /*!********************************************************************************************!*\
    !*** ./node_modules/raw-loader/dist/cjs.js!./src/app/views/buttons/buttons.component.html ***!
    \********************************************************************************************/
  /*! exports provided: default */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony default export */ __webpack_exports__["default"] = ("<div class=\"animated fadeIn\">\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Standard Buttons</strong>\n    </div>\n    <div class=\"card-body\">\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-primary\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-secondary\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-success\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-warning\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-danger\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-info\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-light\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-dark\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-link\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Active State\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-primary active\" aria-pressed=\"true\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-secondary active\" aria-pressed=\"true\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-success active\" aria-pressed=\"true\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-warning active\" aria-pressed=\"true\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-danger active\" aria-pressed=\"true\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-info active\" aria-pressed=\"true\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-light active\" aria-pressed=\"true\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-dark active\" aria-pressed=\"true\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-link active\" aria-pressed=\"true\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Disabled\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-primary\" disabled>Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-secondary\" disabled>Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-success\" disabled>Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-warning\" disabled>Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-danger\" disabled>Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-info\" disabled>Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-light\" disabled>Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-dark\" disabled>Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-link\" disabled>Link</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Outline Buttons</strong>\n    </div>\n    <div class=\"card-body\">\n      <p>\n        Use <code>.btn-outline-*</code> class for outline buttons.\n      </p>\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-primary\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-secondary\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-success\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-warning\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-danger\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-info\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-light\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-dark\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Active State\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-primary active\" aria-pressed=\"true\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-secondary active\" aria-pressed=\"true\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-success active\" aria-pressed=\"true\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-warning active\" aria-pressed=\"true\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-danger active\" aria-pressed=\"true\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-info active\" aria-pressed=\"true\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-light active\" aria-pressed=\"true\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-dark active\" aria-pressed=\"true\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Disabled\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-primary\" disabled>Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-secondary\" disabled>Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-success\" disabled>Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-warning\" disabled>Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-danger\" disabled>Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-info\" disabled>Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-light\" disabled>Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-outline-dark\" disabled>Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Ghost Buttons</strong>\n    </div>\n    <div class=\"card-body\">\n      <p>\n        Use <code>.btn-ghost-*</code> class for ghost buttons.\n      </p>\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-primary\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-secondary\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-success\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-warning\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-danger\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-info\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-light\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-dark\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Active State\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-primary active\" aria-pressed=\"true\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-secondary active\" aria-pressed=\"true\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-success active\" aria-pressed=\"true\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-warning active\" aria-pressed=\"true\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-danger active\" aria-pressed=\"true\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-info active\" aria-pressed=\"true\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-light active\" aria-pressed=\"true\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-dark active\" aria-pressed=\"true\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Disabled\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-primary\" disabled>Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-secondary\" disabled>Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-success\" disabled>Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-warning\" disabled>Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-danger\" disabled>Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-info\" disabled>Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-light\" disabled>Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-block btn-ghost-dark\" disabled>Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\"></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Square Buttons</strong>\n    </div>\n    <div class=\"card-body\">\n      <p>\n        Use <code>.btn-square</code> class for square buttons.\n      </p>\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-primary\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-secondary\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-success\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-warning\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-danger\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-info\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-light\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-dark\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-link\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Active State\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-primary active\" aria-pressed=\"true\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-secondary active\" aria-pressed=\"true\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-success active\" aria-pressed=\"true\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-warning active\" aria-pressed=\"true\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-danger active\" aria-pressed=\"true\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-info active\" aria-pressed=\"true\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-light active\" aria-pressed=\"true\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-dark active\" aria-pressed=\"true\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-link active\" aria-pressed=\"true\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Disabled\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-primary\" disabled>Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-secondary\" disabled>Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-success\" disabled>Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-warning\" disabled>Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-danger\" disabled>Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-info\" disabled>Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-light\" disabled>Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-dark\" disabled>Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-square btn-block btn-link\" disabled>Link</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Pill Buttons</strong>\n    </div>\n    <div class=\"card-body\">\n      <p>\n        Use <code>.btn-pill</code> class for pill buttons.\n      </p>\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-primary\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-secondary\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-success\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-warning\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-danger\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-info\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-light\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-dark\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-link\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Active State\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-primary active\" aria-pressed=\"true\">Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-secondary active\" aria-pressed=\"true\">Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-success active\" aria-pressed=\"true\">Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-warning active\" aria-pressed=\"true\">Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-danger active\" aria-pressed=\"true\">Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-info active\" aria-pressed=\"true\">Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-light active\" aria-pressed=\"true\">Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-dark active\" aria-pressed=\"true\">Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-link active\" aria-pressed=\"true\">Link</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Disabled\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-primary\" disabled>Primary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-secondary\" disabled>Secondary</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-success\" disabled>Success</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-warning\" disabled>Warning</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-danger\" disabled>Danger</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-info\" disabled>Info</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-light\" disabled>Light</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-dark\" disabled>Dark</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0\">\n          <button type=\"button\" class=\"btn btn-pill btn-block btn-link\" disabled>Link</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>Sizes</strong>\n    </div>\n    <div class=\"card-body\">\n      <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>\n      <div class=\"row align-items-center\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Small add <code>.btn-sm</code>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-sm btn-primary\">Standard Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Outline Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-sm btn-ghost-success\">Ghost Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-sm btn-square btn-warning\">Square Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-sm btn-pill btn-danger\">Pill Button</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Normal\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-primary\">Standard Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\">Outline Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-ghost-success\">Ghost Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-square btn-warning\">Square Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-pill btn-danger\">Pill Button</button>\n        </div>\n      </div>\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-12 col-xl mb-3 mb-xl-0\">\n          Large add <code>.btn-lg</code>.\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-primary\">Standard Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-outline-secondary\">Outline Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-ghost-success\">Ghost Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-square btn-warning\">Square Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-pill btn-danger\">Pill Button</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <strong>With Icons</strong>\n    </div>\n    <div class=\"card-body\">\n      <div class=\"row align-items-center mt-3\">\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-primary\"><i class=\"fa fa-lightbulb-o\"></i>&nbsp;Standard Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\"><i class=\"fa fa-lightbulb-o\"></i>&nbsp;Outline Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-ghost-success\"><i class=\"fa fa-lightbulb-o\"></i>&nbsp;Ghost Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-square btn-warning\"><i class=\"fa fa-lightbulb-o\"></i>&nbsp;Square Button</button>\n        </div>\n        <div class=\"col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center\">\n          <button type=\"button\" class=\"btn btn-pill btn-danger\"><i class=\"fa fa-lightbulb-o\"></i>&nbsp;Pill Button</button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <strong>Block Level Buttons</strong>\n        </div>\n        <div class=\"card-body\">\n          <p>Add this class<code>.btn-block</code></p>\n          <button type=\"button\" class=\"btn btn-secondary btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-primary btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-success btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-info btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-warning btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-danger btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-link btn-lg btn-block\">Block level button</button>\n        </div>\n      </div>\n    </div><!--/.col-->\n    <div class=\"col-md-6\">\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <strong>Block Level Buttons</strong>\n        </div>\n        <div class=\"card-body\">\n          <p>Add this class<code>.btn-block</code></p>\n          <button type=\"button\" class=\"btn btn-outline-secondary btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-outline-primary btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-outline-success btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-outline-info btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-outline-warning btn-lg btn-block\">Block level button</button>\n          <button type=\"button\" class=\"btn btn-outline-danger btn-lg btn-block\">Block level button</button>\n        </div>\n      </div>\n    </div><!--/.col-->\n  </div><!--/.row-->\n</div>\n");
  
  /***/ }),
  
  /***/ "xtqT":
  /*!****************************************************!*\
    !*** ./src/app/views/buttons/buttons.component.ts ***!
    \****************************************************/
  /*! exports provided: ButtonsComponent */
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
  
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonsComponent", function() { return ButtonsComponent; });
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "mrSG");
  /* harmony import */ var _raw_loader_buttons_component_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! raw-loader!./buttons.component.html */ "sgt0");
  /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ "8Y7J");
  
  
  
  let ButtonsComponent = class ButtonsComponent {
      constructor() { }
  };
  ButtonsComponent.ctorParameters = () => [];
  ButtonsComponent = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
      Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"])({
          template: _raw_loader_buttons_component_html__WEBPACK_IMPORTED_MODULE_1__["default"]
      }),
      Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [])
  ], ButtonsComponent);
  
  
  
  /***/ })
  
  }]);
  //# sourceMappingURL=views-buttons-buttons-module-es2015.js.map