@coreui/ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template"> <meta name="author" content="Łukasz Holeczek"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js"> <link rel="shortcut icon" href="img/favicon.png"> <title>CoreUI - Open Source Bootstrap Admin Template</title>  <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  </head>  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"> <header class="app-header navbar"> <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button"> <span class="navbar-toggler-icon"></span> </button> <ul class="nav navbar-nav d-md-down-none"> <li class="nav-item px-3"> <a class="nav-link" href="#">Dashboard</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Users</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Settings</a> </li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-list"></i></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-location-pin"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> </a> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-header text-center"> <strong>Account</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a> <div class="dropdown-header text-center"> <strong>Settings</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a> <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a> <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a> <div class="divider"></div> <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a> <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a> </div> </li> </ul> <button class="navbar-toggler aside-menu-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </header> <div class="app-body"> <div class="sidebar"> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a> </li> <li class="nav-title"> Theme </li> <li class="nav-item"> <a href="colors.html" class="nav-link"><i class="icon-drop"></i> Colors</a> </li> <li class="nav-item"> <a href="typography.html" class="nav-link"><i class="icon-pencil"></i> Typograhy</a> </li> <li class="nav-title"> Components </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="base-breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a> </li> <li class="nav-item"> <a class="nav-link" href="base-cards.html"><i class="icon-puzzle"></i> Cards</a> </li> <li class="nav-item"> <a class="nav-link" href="base-carousel.html"><i class="icon-puzzle"></i> Carousel</a> </li> <li class="nav-item"> <a class="nav-link" href="base-collapse.html"><i class="icon-puzzle"></i> Collapse</a> </li> <li class="nav-item"> <a class="nav-link" href="base-forms.html"><i class="icon-puzzle"></i> Forms</a> </li> <li class="nav-item"> <a class="nav-link" href="base-jumbotron.html"><i class="icon-puzzle"></i> Jumbotron</a> </li> <li class="nav-item"> <a class="nav-link" href="base-list-group.html"><i class="icon-puzzle"></i> List group</a> </li> <li class="nav-item"> <a class="nav-link" href="base-navs.html"><i class="icon-puzzle"></i> Navs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-pagination.html"><i class="icon-puzzle"></i> Pagination</a> </li> <li class="nav-item"> <a class="nav-link" href="base-popovers.html"><i class="icon-puzzle"></i> Popovers</a> </li> <li class="nav-item"> <a class="nav-link" href="base-progress.html"><i class="icon-puzzle"></i> Progress</a> </li> <li class="nav-item"> <a class="nav-link" href="base-switches.html"><i class="icon-puzzle"></i> Switches</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tables.html"><i class="icon-puzzle"></i> Tables</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tabs.html"><i class="icon-puzzle"></i> Tabs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tooltips.html"><i class="icon-puzzle"></i> Tooltips</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-cursor"></i> Buttons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="buttons-buttons.html"><i class="icon-cursor"></i> Buttons</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-button-group.html"><i class="icon-cursor"></i> Buttons Group</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-dropdowns.html"><i class="icon-cursor"></i> Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-social-buttons.html"><i class="icon-cursor"></i> Social Buttons</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> Charts</a> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="icons-flags.html"><i class="icon-star"></i> Flags <span class="badge badge-success">NEW</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-bell"></i> Notifications</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="notifications-alerts.html"><i class="icon-bell"></i> Alerts</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-badge.html"><i class="icon-bell"></i> Badge</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-modals.html"><i class="icon-bell"></i> Modals</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a> </li> <li class="divider"></li> <li class="nav-title"> Extras </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a> </li> </ul> </li> <li class="nav-item mt-auto"> <a class="nav-link nav-link-success" href="http://coreui.io/" target="_top"><i class="icon-cloud-download"></i> Download CoreUI</a> </li> <li class="nav-item"> <a class="nav-link nav-link-danger" href="http://coreui.io/pro/" target="_top"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a> </li> </ul> </nav> <button class="sidebar-minimizer brand-minimizer" type="button"></button> </div>  <main class="main">  <ol class="breadcrumb"> <li class="breadcrumb-item">Home</li> <li class="breadcrumb-item"><a href="#">Admin</a></li> <li class="breadcrumb-item active">Dashboard</li>  <li class="breadcrumb-menu d-md-down-none"> <div class="btn-group" role="group" aria-label="Button group"> <a class="btn" href="#"><i class="icon-speech"></i></a> <a class="btn" href="./"><i class="icon-graph"></i>  Dashboard</a> <a class="btn" href="#"><i class="icon-settings"></i>  Settings</a> </div> </li> </ol> <div class="container-fluid"> <div class="animated fadeIn"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Usage ex.</small> <code style="text-transform:lowercase"><button class="btn btn-facebook"><span>Facebook</span></button></code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample1"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-vimeo" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Large <small>Add this class <code>.btn-lg</code> </small> </h6> <p> <button type="button" class="btn btn-lg btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-lg btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-lg btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-lg btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-lg btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-lg btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-lg btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-lg btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-lg btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-lg btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-lg btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-lg btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-lg btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-lg btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-lg btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-lg btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-lg btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-lg btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-lg btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-lg btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-lg btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-lg btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-lg btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-lg btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-lg btn-vimeo" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> </div> </div> </div>  <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase"><button class="btn btn-facebook icon"><span>Facebook</span></button></code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="true" aria-controls="collapseExample2"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample2"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo icon" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-vimeo icon" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Large <small>Add this class <code>.btn-lg</code> </small> </h6> <p> <button type="button" class="btn btn-lg btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-lg btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-lg btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-lg btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-lg btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-lg btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-lg btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-lg btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-lg btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-lg btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-lg btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-lg btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-lg btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-lg btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-lg btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-lg btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-lg btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-lg btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-lg btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-lg btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-lg btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-lg btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-lg btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-lg btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-lg btn-vimeo icon" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> </div> </div> </div>  <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase"><button class="btn btn-facebook text"><span>Facebook</span></button></code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="true" aria-controls="collapseExample3"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample3"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook text" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter text" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin text" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr text" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr text" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing text" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github text" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5 text" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid text" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow text" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3 text" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube text" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble text" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus text" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram text" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest text" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk text" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo text" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance text" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox text" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit text" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify text" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine text" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare text" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo text" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook text" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter text" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin text" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr text" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr text" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing text" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github text" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5 text" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid text" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow text" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3 text" style="margin-bottom: 4px">