index.html



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>
  
    🆓 Free Bootstrap Admin Template &middot; CoreUI
  
</title>

<!-- Twitter -->
<meta name="twitter:site" content="@coreui_ui">
<meta name="twitter:creator" content="@coreui_ui">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="🆓 Free Bootstrap Admin Template">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://coreui.io/assets/brand/coreui-social-logo.png">

<!-- Facebook -->

<meta property="og:url" content="https://coreui.io/">
<meta property="og:title" content="🆓 Free Bootstrap Admin Template">
<meta property="og:description" content="">
<meta property="og:type" content="website">

<meta property="og:image" content="http://coreui.io/assets/brand/coreui-social.png">
<meta property="og:image:secure_url" content="https://coreui.io/assets/brand/coreui-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Meta -->

<meta name="description" content="Free Boostrap Admin Template.">

<meta name="author" content="Łukasz Holeczek, CoreUI Team">


<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/style.1.0.3.min.css" rel="stylesheet">
<link href="/assets/css/coreui-icons-linear.css?v=0.4.0" rel="stylesheet">
<link href="/assets/css/coreui-icons-solid.css?v=0.4.0" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-icon.png">
<link rel="icon" href="/favicon.ico">

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-118965717-1', 'auto', {'allowLinker': true});
  ga('require', 'linker');
  ga('linker:autoLink', ['gumroad.com','genesisui.com']);
  ga('send', 'pageview');

</script>

    <link rel="stylesheet" href="/assets/vendors/flipclock/flipclock.css">
  </head>
  <body>
    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
      <div class="container">
        <span class="skiplink-text">Skip to main content</span>
      </div>
    </a>

    <!-- <a href="https://sketchstrap.io" class="sketchstrap" target="_blank">
  🎉 <strong>Early access!</strong> SketchStrap Bootstrap Customizer. The easiest way to customize your Bootstrap.
</a> -->
<div class="bg-danger d-block text-center text-white p-3" style="background-color: #4776e6;background-image: linear-gradient(to right, #4776e6, #8e54e9);">
  💪💪💪 Please help us on Github. Give us a star ⭐️ 🙏🙏 ➡
  <span onclick="ga('send', 'event', 'Give us a star', 'Click', 'Top banner');" style="position:absolute;margin-left:10px;margin-top:-4px;">
    <!-- Place this tag where you want the button to render. -->
    <a class="github-button" href="https://github.com/coreui/coreui-free-bootstrap-admin-template" data-size="large" aria-label="Star coreui/coreui-free-bootstrap-admin-template on GitHub" target="_blank">Star</a>
  </span>
</div>
<!-- <a href="/icons/" class="bg-danger d-block text-center text-white py-3">
  🎉 <strong>Early access!</strong> CoreUI Icons. Delightful, beautifully crafted symbols for common actions and items.
</a> -->
<header class="navbar navbar-expand-lg navbar-dark" style="background-color:#1ea6d6">
  <a class="navbar-brand mr-0 mr-md-5" href="/" aria-label="Bootstrap">
    
      <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  class="d-block align-middle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="97"  height="28" viewBox="0 0 711 205.5" style="enable-background:new 0 0 711 205.5;" xml:space="preserve">
<style type="text/css">
	.st0{display:none;}
	.st1{display:inline;fill:#ED1F24;stroke:#000000;stroke-miterlimit:10;}
	.st2{fill:#FFFFFF;}
	.st3{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st4{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st5{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st6{opacity:8.000000e-02;}
	.st7{fill:none;}
</style>
<g id="Warstwa_2" class="st0">
	<rect x="-137.2" y="-140.2" class="st1" width="1081.7" height="575.9"/>
</g>
<g id="Warstwa_1">
	<path class="st2" d="M89.1,3L2.5,53v100l86.6,50l86.6-50V53L89.1,3z M89.1,136.3l28.9-16.7l28.9,16.7l-57.7,33.3l-57.7-33.3V69.7
		l57.7-33.3l57.7,33.3L118,86.3L89.1,69.7L60.2,86.3v33.3L89.1,136.3z"/>
	<polygon class="st3" points="2.5,53 89.1,103 89.1,3 	"/>
	<polygon class="st3" points="2.5,153 89.1,203 89.1,103 	"/>
	<polygon class="st4" points="89.1,103 175.7,153 175.7,53 	"/>
	<polygon class="st5" points="89.1,103 2.5,53 2.5,153 	"/>
	<polygon class="st4" points="175.7,153 89.1,103 89.1,203 	"/>
	<polygon class="st4" points="175.7,53 89.1,3 89.1,103 	"/>
	<g>
		<path class="st2" d="M293,130.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
			c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
			c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
			c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
			c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
			c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
			c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
			C291.8,130.4,292.4,130.3,293,130.3z"/>
		<path class="st2" d="M410,104.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
			c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
			c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
			c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
			C408.8,90.7,410,97.3,410,104.5z M391.4,104.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
			c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
			c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
			c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C390.7,114.7,391.4,109.9,391.4,104.5z"/>
		<path class="st2" d="M443.1,115.2v38.1h-18.2V55.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
			c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
			c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
			c-0.9-0.5-2.3-0.7-4.1-0.7H443.1z M443.1,102.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
			c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V102.1z"/>
		<path class="st2" d="M574.3,55.7v14.4H531v27.1h34.1v14H531v27.6h43.3v14.5h-61.6V55.7H574.3z"/>
		<path class="st2" d="M629.3,138.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1
			V55.7h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
			s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V55.7H607v58.4c0,3.7,0.5,7.1,1.5,10.1
			c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C622.7,138.1,625.8,138.7,629.3,138.7z"/>
		<path class="st2" d="M708.7,153.3h-18.2V55.7h18.2V153.3z"/>
		<path class="st6" d="M629.3,138.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1
			V55.7h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
			s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V55.7H607v58.4c0,3.7,0.5,7.1,1.5,10.1
			c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C622.7,138.1,625.8,138.7,629.3,138.7z"/>
		<path class="st6" d="M708.7,153.3h-18.2V55.7h18.2V153.3z"/>
	</g>
	<rect x="-137.2" y="-140.2" class="st7" width="1035.1" height="510.1"/>
</g>
</svg>

    
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/docs">Documentation</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/blog/">Blog</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="/icons/">Icons <span class="badge badge-warning">new</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle mr-md-2" href="#" id="versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Products
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="versions">
          <a class="dropdown-item" href="/">CoreUI</a>
          <a class="dropdown-item" href="/angular">CoreUI for Angular</a>
          <!-- <a class="dropdown-item" href="/angularjs">CoreUI for AngularJS</a> -->
          <a class="dropdown-item" href="/react">CoreUI for React.js</a>
          <a class="dropdown-item" href="/vue">CoreUI for Vue.js</a>
          <hr>
          <a class="dropdown-item" href="/pro/">CoreUI <strong>Pro</strong></a>
          <a class="dropdown-item" href="/pro/angular">CoreUI <strong>Pro</strong> for Angular</a>
          <!-- <a class="dropdown-item" href="/pro/angularjs">CoreUI <strong>Pro</strong> for AngularJS</a> -->
          <a class="dropdown-item" href="/pro/react">CoreUI <strong>Pro</strong> for React.js</a>
          <a class="dropdown-item" href="/pro/vue">CoreUI <strong>Pro</strong> for Vue.js</a>
          <hr>
          <a class="dropdown-item" href="/icons/">CoreUI Icons</a>
          <hr>
          <a class="dropdown-item" href="/admin-templates/angular/">Angular Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/bootstrap/">Bootstrap Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/react/">React.js Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/vue/">Vue.js Admin Templates</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle mr-md-2" href="#" id="versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Admin Templates
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="versions">
          <a class="dropdown-item" href="/admin-templates/angular/">Angular Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/bootstrap/">Bootstrap Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/react/">React.js Admin Templates</a>
          <a class="dropdown-item" href="/admin-templates/vue/">Vue.js Admin Templates</a>
        </div>
      </li>
    </ul>
    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item mr-3">
        <a class="nav-link" href="/support/">Support</a>
      </li>
      
      <li class="nav-item mr-3">
        <a class="btn btn-warning" href="/pro/" onclick="ga('send', 'event', 'Go Pro', 'Click', 'Navbar');">Go Pro</a>
      </li>
      
      <!-- <li class="nav-item">
        <a class="btn btn-outline-warning" href="http://holeczek.pl" onclick="ga('send', 'event', 'About me', 'Click', 'Navbar');">About me</a>
      </li> -->
      <li class="nav-item">
        <a class="btn btn-outline-warning" href="/about/services/" onclick="ga('send', 'event', 'Hire us', 'Click', 'Navbar');">Hire us</a>
      </li>
    </ul>
  </div>
</header>


    <main class="masthead text-white" id="content" role="main" style="overflow:hidden;background-color:#1ea6d6;">
      <div class="container">
        <div class="row">
          <div class="col-6 mx-auto col-md-6 order-md-2">
            <img src="/assets/img/mockup.png" alt="" style="position:absolute">
          </div>
          <div class="col-md-6 order-md-1 text-center text-md-left">
            <h1 class="mb-3 text-sm-nowrap">CoreUI</h1>
            <h2 class="mb-3 text-sm-nowrap">Free Bootstrap Admin Template</h2>
            <p class="lead">
              The only Bootstrap Admin Template you need to <strong>create amazing user interfaces</strong>.
            </p>
            <p class="lead mb-4">
              CoreUI is an open source Bootstrap 4 based admin template.
            </p>
            <div class="d-flex flex-column flex-md-row lead mb-3">
              <a href="#live-preview" class="btn btn-lg btn-outline-light mb-3 mb-md-0 mr-md-3">Live preview</a>
              <a href="#download" class="btn btn-lg btn-outline-light mb-3 mb-md-0 mr-md-3">Download CoreUI</a>
              <a href="#buy" class="btn btn-lg btn-warning" onclick="ga('send', 'event', 'Go Pro', 'Click', 'Page header');">Get a CoreUI Pro license</a>
            </div>
            <div class="github-buttons pt-4">
              <!-- Place this tag where you want the button to render. -->
              <a class="github-button" href="https://github.com/coreui/coreui-free-bootstrap-admin-template" data-size="large" data-show-count="true" aria-label="Star coreui/coreui-free-bootstrap-admin-template on GitHub">Star</a>
              <span class="px-1"></span>
              <!-- Place this tag where you want the button to render. -->
              <a class="github-button" href="https://github.com/coreui/coreui-free-bootstrap-admin-template/fork" data-size="large" data-show-count="true" aria-label="Fork index.html on GitHub">Fork</a>
            </div>
            <div class="version text-small mt-3">
              Library version: <strong>2.1.8</strong> &middot; Admin template version: <strong>2.1.12</strong>
            </div>
          </div>
        </div>
      </div>
    </main>
    <section class="black-friday text-white py-5">
  <div class="container text-center">
    <h1 class="mb-3 text-sm-nowrap">September Discount</h1>
    <h2 class="mb-3 text-sm-nowrap">CoreUI Pro &amp; All Premium Admin Templates <span class="text-danger"><strong>up to 90% off</strong></span>.</h2>
    <p class="lead pb-3">
      Interested in purchasing all our products? Buy the Big Bundle and <span class="text-danger"><strong>save up to $14992</strong></span>.
    </p>
    <div class="mt-3">
      <a href="/bundle/" class="btn btn-lg btn-warning w-auto" onclick="ga('send', 'event', 'Go to Bundle', 'Click', 'Under page header');">View offer</a>
    </div>
  </div>
</section>

    <section class="py-5 bg-light">
      <div class="container">
        <div class="text-center">
          CoreUI supports most popular frameworks. Learn more about dedicated versions for:
        </div>
        <div class="text-center mt-3">
          <a href="/" class="btn btn-lg btn-outline-bootstrap" style="width: 200px">Bootstrap 4 HTML</a>
          <a href="/angular/" class="btn btn-lg btn-outline-angular" style="width: 200px">Angular 2+</a>
          <a href="/react/" class="btn btn-lg btn-outline-react" style="width: 200px">React.js</a>
          <a href="/vue/" class="btn btn-lg btn-outline-vue" style="width: 200px">Vue.js</a>
        </div>
      </div>
    </section>

    <section class="py-5" id="ui-components">
      <div class="container">
        <div class="text-center">
          <h2 class="section-heading">50+ ready to use and customizable UI Components.<br/>Speed up development time by up to 50%.</h2>
          <span class="separator"></span>
          <p class="section-subheading">Create data-rich responsive web apps, and speed up development time by up to 50%</p>
        </div>
        <div class="row">
          
          
          <div class="col">
          
            
            <ul class="list-unstyled">
              <li><strong>Components</strong></li>
              
                
                <li><a href="/demo/#base/breadcrumb.html" target="_blank">Breadcrumb</a></li>
              
                
                <li><a href="/demo/#base/cards.html" target="_blank">Cards</a></li>
              
                
                <li><a href="/demo/#base/carousel.html" target="_blank">Carousel</a></li>
              
                
                <li><a href="/demo/#base/collapse.html" target="_blank">Collapse</a></li>
              
                
                <li><a href="/demo/#base/jumbotron.html" target="_blank">Jumbotron</a></li>
              
                
                <li><a href="/demo/#base/list-group.html" target="_blank">List group</a></li>
              
                
                <li><a href="/demo/#base/navs.html" target="_blank">Navs</a></li>
              
                
                <li><a href="/demo/#base/pagination.html" target="_blank">Pagination</a></li>
              
                
                <li><a href="/demo/#base/popovers.html" target="_blank">Popovers</a></li>
              
                
                <li><a href="/demo/#base/progress.html" target="_blank">Progress</a></li>
              
                
                <li><a href="/demo/#base/switches.html" target="_blank">Switches</a></li>
              
                
                <li><a href="/demo/#base/Tabs.html" target="_blank">Tabs</a></li>
              
                
                <li><a href="/demo/#base/tooltips.html" target="_blank">Tooltips</a></li>
              
            </ul>
          
            
              </div>
              <div class="col">
            
            <ul class="list-unstyled">
              <li><strong>Buttons</strong></li>
              
                
                <li><a href="/demo/#buttons/buttons.html" target="_blank">Standard Buttons</a></li>
              
                
                <li><a href="/demo/#buttons/buttons.html" target="_blank">Outline Buttons</a></li>
              
                
                <li><a href="/demo/#buttons/buttons.html" target="_blank">Pill Buttons</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#buttons/buttons.html" target="_blank">Rounded Buttons</a></li>
              
                
                <li><a href="/demo/#buttons/button-group.html" target="_blank">Buttons Group</a></li>
              
                
                <li><a href="/demo/#buttons/Dropdowns.html" target="_blank">Dropdowns</a></li>
              
                
                <li><a href="/demo/#buttons/loading-buttons.html" target="_blank">Loading Buttons</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#buttons/brand-buttons.html" target="_blank">Brand Buttons</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Charts</strong></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Line Chart</a></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Bar Chart</a></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Doughnut Chart</a></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Radar Chart</a></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Pie Chart</a></li>
              
                
                <li><a href="/demo/#charts.html" target="_blank">Polar Area Chart</a></li>
              
            </ul>
          
            
              </div>
              <div class="col">
            
            <ul class="list-unstyled">
              <li><strong>Editors</strong></li>
              
                
                <li><a href="/demo/#editors/code-editor.html" target="_blank">Code Editor</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#editors/markdown-editor.html" target="_blank">Markdown Editor</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#editors/text-editors.html" target="_blank">Rich Text Editor</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Forms</strong></li>
              
                
                <li><a href="/demo/#forms/basic-forms.html" target="_blank">Standard Forms</a></li>
              
                
                <li><a href="/demo/#forms/basic-forms.html" target="_blank">Horizontal Forms</a></li>
              
                
                <li><a href="/demo/#forms/basic-forms.html" target="_blank">Inline Forms</a></li>
              
                
                <li><a href="/demo/#forms/basic-forms.html" target="_blank">Input Groups</a></li>
              
                
                <li><a href="/demo/#forms/advanced-forms.html" target="_blank">Masked Inputs</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#forms/advanced-forms.html" target="_blank">DataRangePicker</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#forms/advanced-forms.html" target="_blank">Select2</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#forms/validation.html" target="_blank">Form Validation</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
              </div>
              <div class="col">
            
            <ul class="list-unstyled">
              <li><strong>Icons</strong></li>
              
                
                <li><a href="/demo/#icons/flags.html" target="_blank">Flags</a></li>
              
                
                <li><a href="/demo/#icons/font-awesome.html" target="_blank">Font Awesome</a></li>
              
                
                <li><a href="/demo/#icons/simple-line-icons.html" target="_blank">Simple Line Icons</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Maps</strong></li>
              
                
                <li><a href="/demo/#google-maps.html" target="_blank">Google Maps</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Notifications</strong></li>
              
                
                <li><a href="/demo/#notifications/alerts.html" target="_blank">Alerts</a></li>
              
                
                <li><a href="/demo/#notifications/badge.html" target="_blank">Badge</a></li>
              
                
                <li><a href="/demo/#notifications/modals.html" target="_blank">Modals</a></li>
              
                
                <li><a href="/demo/#notifications/toastr.html" target="_blank">Toast</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Plugins</strong></li>
              
                
                <li><a href="/demo/#plugins/calendar.html" target="_blank">Calendar</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#plugins/draggable-cards.html" target="_blank">Draggable Cards</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#plugins/sliders.html" target="_blank">Sliders</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#plugins/spinners.html" target="_blank">Spinners</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
              </div>
              <div class="col">
            
            <ul class="list-unstyled">
              <li><strong>Tables</strong></li>
              
                
                <li><a href="/demo/#tables/tables.html" target="_blank">Standard Tables</a></li>
              
                
                <li><a href="/demo/#tables/datatables.html" target="_blank">DataTables</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Widgets</strong></li>
              
                
                <li><a href="/demo/#widgets.html" target="_blank">Widgets</a></li>
              
            </ul>
          
            
            <ul class="list-unstyled">
              <li><strong>Extras</strong></li>
              
                
                <li><a href="/demo/#views/pages/login.html" target="_blank">Login Page</a></li>
              
                
                <li><a href="/demo/#views/pages/register.html" target="_blank">Register Page</a></li>
              
                
                <li><a href="/demo/#views/pages/404.html" target="_blank">404 Error Page</a></li>
              
                
                <li><a href="/demo/#views/pages/500.html" target="_blank">500 Error Page</a></li>
              
                
                <li><a href="/demo/#UIkits/invoicing/invoice.html" target="_blank">Invocing App UI Kit</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
                
                <li><a href="/demo/#UIkits/email/inbox.html" target="_blank">Email App UI Kit</a> <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></li>
              
            </ul>
          
          </div>
        </div>
      </div>
    </section>

    <section class="py-5 bg-light" id="live-preview">
      <div class="container">
        <div class="text-center">
          <h2 class="section-heading mb-4">Choose demos</h2>
        </div>
        <div class="row">
          <div class="col">
            <div class="card">
              <img class="card-img-top" src="/assets/img/default-layout.jpg" alt="CoreUI Default Layout">
              <div class="card-body">
                <h5 class="card-title">Default layout</h5>
                <a href="/demo" class="btn btn-outline-primary mb-3 mb-md-0 mr-md-3" target="_blank">Live preview</a>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <img class="card-img-top" src="/assets/img/dark-layout.jpg" alt="CoreUI Default Layout">
              <div class="card-body">
                <h5 class="card-title">Dark layout <a href="/pro/" class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Available in PRO Version">PRO</a></h5>
                <a href="/demo/dark/" class="btn btn-outline-primary mb-3 mb-md-0 mr-md-3" target="_blank">Live preview</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="container text-center py-5 customers" id="customers">
      <h1>CoreUI Pro</h1>
      <h2>More components, more styles, more themes, and premium support</h2>
      <div class="row">
        <div class="col-md-9 mx-auto">
          <h3 class="mb-5">You’re in good company. <span class="text-muted">CoreUI Pro powers thousands of apps at some of the smartest companies around the world.</span></h3>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/nvidia600.png" alt="Nvidia">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/ea600.png" alt="EA">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/dhl600.png" alt="DHL">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/olx600.png" alt="OLX">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/citi600.png" alt="Citi">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/paypal600.png" alt="PayPal">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/virgin-media600.png" alt="Virgin">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/plus500600.png" alt="Plus500">
        </div>
        <div class="col">
          <img class="img-fluid" src="/assets/img/clients/cisco600.png" alt="Cisco">
        </div>
      </div>
    </div>

    <div class="container pt-5 table-pricing" id="buy">
      
      
      <div class="text-center mb-5">
        <h3>CoreUI Pro licenses and prices</h3>
        <p>Choose an option which suits your needs. Which type of license is the best for me? <a href="/pro/license/">View license details.</a></p>
      </div>
      <div class="row" style="margin:0 -50px">
        <div class="col-md">
          <div class="text-success">Standard License</div>
          <div class="text-muted mb-3"><small>Use, by you or your one client, in a <strong>single end product</strong> which end users are <strong>not charged for</strong>.</small><br><br></div>
          <div class="card-group">
            <div class="card pricing">
              <div class="pricing-title">CoreUI Pro Static &amp; AJAX</div>
              <div class="pricing-price" id="price-standard">
                <span class="currency">$</span>
                <span class="price">69</span>
                <span class="period">/ one-off</span></div>
              <div class="text-muted"><small>Solo license</small></div>
              <div class="pricing-row versions bg-light">
                <div>Include following versions:</div>
                <ul class="dashed">
                
                  <li><strong>CoreUI Pro Static</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro AJAX (jQuery)</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                </ul>
              </div>
              <div class="pricing-row p-1">Default and <strong>dark layout</strong></div>
              <div class="pricing-row p-1">Single project</div>
              <div class="pricing-row p-1 text-muted"><del>Sketch files</del></div>
              <div class="pricing-row p-1 text-muted"><del>Ready for resale</del></div>
              <div class="pricing-row p-1 text-muted"><del>Access to private Github repository</del></div>
              <div class="pricing-row p-1">Standard support</div>
              <div class="pricing-row p-1">Free access to future updates</div>
              <div class="pricing-row p-1">Lifetime usage license</strong></div>
              <div class="pricing-row button-container mt-auto">
                <span onclick="ga('send', 'event', 'CoreUI Pro Standard Home', 'Buy Init', 'coreui', '69');">
                  <a href="https://gum.co/coreui-pro-static-ajax-s?wanted=true" class="btn btn-lg btn-primary btn-block" id="buy-standard" data-gumroad-single-product="true">Buy Now for $69</span></a>
                </span>
              </div>
            </div>
            <div class="card pricing">
              <div class="pricing-most-popular">Most popular</div>
              <div class="pricing-title">All frameworks + Sketch</div>
              <div class="pricing-price">
                <span class="currency">
                  <span class="text-muted"><del>$276</del></span>
                  <span class="text-danger">$</span>
                </span>
                <span class="price text-danger">99</span>
                <span class="period">/ one-off</span>
              </div>
              <div class="text-muted"><small>Solo license</small></div>
              <div class="pricing-row versions bg-light">
                <div>Include following versions:</div>
                <ul class="dashed">
                
                  <li><strong>CoreUI Pro Static</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro AJAX (jQuery)</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Angular 8</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro React.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Vue.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                </ul>
                <hr>
                <ul class="dashed">
                  <li><strong>Sketch files</strong><br><span class="text-muted d-block"><small>(Default &amp; Dark layout)</small></span></li>
                </ul>
              </div>
              <div class="pricing-row p-1">Default and <strong>dark layout</strong></div>
              <div class="pricing-row p-1">Single project</div>
              <div class="pricing-row p-1"><strong>Include Sketch files</strong></div>
              <div class="pricing-row p-1 text-muted"><del>Ready for resale</del></div>
              <div class="pricing-row p-1 text-muted"><del>Access to private Github repository</del></div>
              <div class="pricing-row p-1">Standard support</div>
              <div class="pricing-row p-1">Free access to future updates</div>
              <div class="pricing-row p-1">Lifetime usage license</strong></div>
              <div class="pricing-row button-container">
                <span onclick="ga('send', 'event', 'CoreUI Pro Standard Home', 'Buy Init', 'coreui', '99');">
                  <a href="https://gum.co/coreui-pro-s/97off?wanted=true" class="btn btn-lg btn-primary btn-block" data-gumroad-single-product="true" >Buy Now for $99</span></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="text-info">Extended License</div>
          <div class="text-muted mb-3"><small>Use, by you or your one client, in a <strong>single end product</strong> which end users <strong>can be charged for.</strong> ex. SaaS application, eCommerce, etc.</small><br><br></div>
          <div class="card-group">
            <div class="card pricing">
              <div class="pricing-title">CoreUI Pro Static &amp; AJAX</div>
              <div class="pricing-price">
                <span class="currency">
                  <span class="text-muted"><del>$999</del></span>
                  <span class="text-danger">$</span>
                </span>
                <span class="price text-danger">699</span>
                <span class="period">/ one-off</span>
              </div>
              <div class="text-muted"><small>Solo license</small></div>
              <div class="pricing-row versions bg-light">
                <div>Include following versions:</div>
                <ul class="dashed">
                
                  <li><strong>CoreUI Pro Static</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro AJAX (jQuery)</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                </ul>
              </div>
              <div class="pricing-row p-1">Default and <strong>dark layout</strong></div>
              <div class="pricing-row p-1">Single project</div>
              <div class="pricing-row p-1 text-muted"><del>Sketch files</del></div>
              <div class="pricing-row p-1"><strong>Ready for resale</strong></div>
              <div class="pricing-row p-1 text-muted"><del>Access to private Github repository</del></div>
              <div class="pricing-row p-1">Standard support</div>
              <div class="pricing-row p-1">Free access to future updates</div>
              <div class="pricing-row p-1">Lifetime usage license</strong></div>
              <div class="pricing-row button-container">
                <span onclick="ga('send', 'event', 'CoreUI Pro Extended Home', 'Buy Init', 'coreui', '999');">
                  <a href="https://gum.co/coreui-pro-static-ajax-e/300off?wanted=true" class="btn btn-lg btn-primary btn-block" data-gumroad-single-product="true">Buy Now for $699</span></a>
                </span>
              </div>
            </div>
            <div class="card pricing">
              <div class="pricing-title">All frameworks + Sketch</div>
              <div class="pricing-price">
                <span class="currency">
                  <span class="text-muted"><del>$2796</del></span>
                  <span class="text-danger">$</span>
                </span>
                <span class="price text-danger">999</span>
                <span class="period">/ one-off</span>
              </div>
              <div class="text-muted"><small>Solo license</small></div>
              <div class="pricing-row versions bg-light">
                <div>Include following versions:</div>
                <ul class="dashed">
                
                  <li><strong>CoreUI Pro Static</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro AJAX (jQuery)</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Angular 8</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro React.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Vue.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                </ul>
                <hr>
                <ul class="dashed">
                  <li><strong>Sketch files</strong><br><span class="text-muted d-block"><small>(Default &amp; Dark layout)</small></span></li>
                </ul>
              </div>
              <div class="pricing-row p-1">Default and <strong>dark layout</strong></div>
              <div class="pricing-row p-1">Single project</div>
              <div class="pricing-row p-1"><strong>Include Sketch files</strong></div>
              <div class="pricing-row p-1"><strong>Ready for resale</strong></div>
              <div class="pricing-row p-1 text-muted"><del>Access to private Github repository</del></div>
              <div class="pricing-row p-1">Standard support</div>
              <div class="pricing-row p-1">Free access to future updates</div>
              <div class="pricing-row p-1">Lifetime usage license</strong></div>
              <div class="pricing-row button-container">
                <span onclick="ga('send', 'event', 'CoreUI Pro Extended Home', 'Buy Init', 'coreui', '999');">
                  <a href="https://gum.co/coreui-pro-e/1000off?wanted=true" class="btn btn-lg btn-primary btn-block" data-gumroad-single-product="true">Buy Now for $999</span></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-auto">
          <div style="width:270px">
            <div class="text-warning">Membership</div>
            <div class="text-muted mb-3"><small>Use, by you or your clients, in <strong>unlimited end products</strong> which end users can be charged for. ex. SaaS application, eCommerce, etc.</small></div>
            <div class="pricing">
              <div class="pricing-title">All frameworks + Sketch</div>
              <div class="pricing-price">
                <span class="currency">
                  <span class="text-muted"><del>$99</del></span>
                  <span class="text-danger">$</span>
                </span>
                <span class="price text-danger">69</span>
                <span class="period">/ mo / seat</span>
              </div>
              <div class="text-muted"><small>Per team member</small></div>
              <div class="pricing-row versions bg-light">
                <div>Include following versions:</div>
                <ul class="dashed">
                
                  <li><strong>CoreUI Pro Static</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro AJAX (jQuery)</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Angular 8</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro React.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                  <li><strong>CoreUI Pro Vue.js</strong><br/><span class="text-muted d-block"><small>(Full project &amp; Starter)</small></span></li>
                
                </ul>
                <hr>
                <ul class="dashed">
                  <li><strong>Sketch files</strong><br><span class="text-muted d-block"><small>(Default &amp; Dark layout)</small></span></li>
                </ul>
              </div>
              <div class="pricing-row p-1">Default and <strong>dark layout</strong></div>
              <div class="pricing-row p-1"><strong>Unlimited projects</strong></div>
              <div class="pricing-row p-1"><strong>Include Sketch files</strong></div>
              <div class="pricing-row p-1"><strong>Ready for resale</strong></div>
              <div class="pricing-row p-1"><strong>Access to private Github repository</strong></div>
              <div class="pricing-row p-1"><strong>Priority support</strong></div>
              <div class="pricing-row p-1">Free access to future updates</div>
              <div class="pricing-row button-container">
                <span onclick="ga('send', 'event', 'CoreUI Pro Membership Home', 'Buy Init', 'coreui', '69');">
                  <a href="https://gum.co/coreui-pro-membership" class="btn btn-lg btn-primary btn-block" data-gumroad-single-product="true">Buy Now for $69</span></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 text-center pt-3">
          <small><i>Prices in USD.</i></small><br>
          <small>
            <span class="text-success"><i class="fa fa-lock"></i> SECURED BY <a href="https://gumroad.com" class="text-success">GUMROAD</a></span><br/>
            <img src="/assets/img/payment-methods.png" alt="PayPal Secure Payments" style="height:18px"/><br/><br/>
          </small>
        </div>
      </div>
    </div>

    
    <div class="container pb-5" id="download">
  <h3 class="mb-5 text-center"><span class="text-muted">CoreUI</span> vs <span style="color:#1ea6d6">CoreUI PRO</span></h3>
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr class="table-primary">
          <th></th>
          <th class="text-center">CoreUI</th>
          <th class="text-center">CoreUI PRO</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td class="text-center"><a href="https://github.com/coreui/coreui-free-bootstrap-admin-template" class="btn btn-lg btn-outline-primary" onclick="ga('send', 'event', 'Download', 'Click', 'coreui');" target="_blank">Download CoreUI</span></a></td>
          <td class="text-center"><a href="#buy" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Try CoreUI Pro', 'Click', 'coreui');">Get a CoreUI PRO</span></a></td>
        </tr>
        
          <tr>
            <td>
              <strong>All Bootstrap 4 Components</strong>
            </td>
            <td class="text-center"><span class="text-success">Yes</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Free access to updates</strong>
            </td>
            <td class="text-center"><span class="text-success">Yes</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>SCSS Source Files</strong>
            </td>
            <td class="text-center"><span class="text-success">Yes</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
        <tr>
          <td>
            <strong>Sketch files</strong>
          </td>
          <td class="text-center"><span class="text-danger">No</span></td>
          <td class="text-center"><span class="text-success">Yes*</span></td>
        </tr>
        
        <tr class="table-primary">
          <td colspan="3"><strong>Plugins</strong></td>
        </tr>
        
          <tr>
            <td>
              <strong>Chart.js</strong>
            </td>
            <td class="text-center"><span class="text-success">Yes</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Pace</strong>
            </td>
            <td class="text-center"><span class="text-success">Yes</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
        
          <tr>
            <td>
              <strong>DateRangePicker</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>DataTables</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Full Calendar</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Gauge.js</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Google Maps</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Ion.RangeSlider</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>jQuery UI</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>jQuery Validation</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>jQuery Masked Input</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Ladda Buttons</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Moment.js</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Select2</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>SpinKit</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Toastr</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Quill Text Editor</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
        <tr class="table-primary">
          <td colspan="3"><strong>UI Kits</strong></td>
        </tr>
        
          <tr>
            <td>
              <strong>Invoicing - Invoice</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Email - Inbox</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Email - Message</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
          <tr>
            <td>
              <strong>Email - Compose</strong>
            </td>
            <td class="text-center"><span class="text-danger">No</span></td>
            <td class="text-center"><span class="text-success">Yes</span></td>
          </tr>
        
        <tr class="table-primary">
          <td colspan="3"><strong>Support</strong></td>
        </tr>
        <tr>
          <td>
            <strong>Basic support</strong>
          </td>
          <td class="text-center"><span class="text-success">Yes</span></td>
          <td class="text-center"><span class="text-success">Yes</span></td>
        </tr>
        <tr>
          <td>
            <strong>Premium support</strong>
          </td>
          <td class="text-center"><span class="text-danger">No</span></td>
          <td class="text-center"><span class="text-success">Yes</span></td>
        </tr>
        <tr>
          <td>
            <strong>Access to private GitHub repository</strong>
          </td>
          <td class="text-center"><span class="text-danger">No</span></td>
          <td class="text-center"><span class="text-success">Yes**</span></td>
        </tr>
        <tr>
          <td></td>
          <td class="text-center"><a href="https://github.com/coreui/coreui-free-bootstrap-admin-template" class="btn btn-lg btn-outline-primary" onclick="ga('send', 'event', 'Download', 'Click', 'coreui');" target="_blank">Download CoreUI</span></a></td>
          <td class="text-center"><a href="#buy" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Try CoreUI Pro', 'Click', 'coreui');">Get a CoreUI PRO</span></a></td>
        </tr>
      </tbody>
    </table>
    * Available only in "Standard License All frameworks + Sketch", "Extended License All frameworks + Sketch", "Membership Plan"<br/>
    ** Available only in "Membership Plan"
  </div>
</div>


    <div class="masthead-followup row m-0 border border-white">
      <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
        <h3 class="mb-3">Download CoreUI Admin Panel</h3>
        <p>The fastest way to start using CoreUI is to download our ready to use admin template.</p>

<figure class="highlight"><pre><code class="language-sh" data-lang="sh">git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project
<span class="c"># clone the repo</span>

<span class="nv">$ </span><span class="nb">cd </span>my-project
<span class="c"># go into app's directory</span>

<span class="nv">$ </span>npm <span class="nb">install</span>
<span class="c"># install app's dependencies</span></code></pre></figure>
        <hr class="half-rule">
        <a class="btn btn-outline-primary" href="/docs/getting-started/introduction/#installation">Read documentation</a>
      </div>
      <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
        <h3 class="mb-3">Add CoreUI to existing project</h3>
        <p>Install CoreUI in your Node.js powered apps with the npm package:</p>

<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm <span class="nb">install</span> @coreui/coreui</code></pre></figure>

        <hr class="half-rule">
        
        <a class="btn btn-outline-primary" href="/docs/getting-started/introduction/#add-coreui-to-existing-project">Read documentation</a>
        

      </div>

      <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
        <h3 class="mb-3">Bootstrap Admin Templates</h3>
        <p>
          Our admin templates was designed as its own extended version of Bootstrap. Built in accordance to the latest standards. Based on most popular web components and frameworks.
        </p>
        <div id="carouselIndicators" class="carousel slide support" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselIndicators" data-slide-to="1"></li>
            <li data-target="#carouselIndicators" data-slide-to="2"></li>
            <li data-target="#carouselIndicators" data-slide-to="3"></li>
            <li data-target="#carouselIndicators" data-slide-to="4"></li>
            <li data-target="#carouselIndicators" data-slide-to="5"></li>
            <li data-target="#carouselIndicators" data-slide-to="6"></li>
            <li data-target="#carouselIndicators" data-slide-to="7"></li>
          </ol>
          <div class="carousel-inner">
            
            <div class="carousel-item px-5 active">
              <a href="/admin-templates/bootstrap/root/">
                <img class="d-block w-100" src="/assets/img/responsive-root.png" alt="Root">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/prime/">
                <img class="d-block w-100" src="/assets/img/responsive-prime.png" alt="Prime">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/alba/">
                <img class="d-block w-100" src="/assets/img/responsive-alba.png" alt="Alba">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/leaf/">
                <img class="d-block w-100" src="/assets/img/responsive-leaf.png" alt="Leaf">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/clever/">
                <img class="d-block w-100" src="/assets/img/responsive-clever.png" alt="Clever">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/genius/">
                <img class="d-block w-100" src="/assets/img/responsive-genius.png" alt="Genius">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/real/">
                <img class="d-block w-100" src="/assets/img/responsive-real.png" alt="Real">
              </a>
            </div>
            
            <div class="carousel-item px-5">
              <a href="/admin-templates/bootstrap/simpliq/">
                <img class="d-block w-100" src="/assets/img/responsive-simpliq.png" alt="SimpliQ">
              </a>
            </div>
            
          </div>
          <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        <hr class="half-rule">
        <a href="/admin-templates/bootstrap" class="btn btn-outline-primary">Explore all templates</a>
      </div>
    </div>
    <footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <img src="/assets/img/coreui-sygnet-white.png" class="img-fluid">
      </div>
      <div class="col-md-3">
        <h5>Quick links</h5>
        <ul class="list-unstyled">
          <li><a href="/docs/getting-started/introduction/">Documentation</a></li>
          <li><a href="/angular/">Angular 2+ Version</a></li>
          <li><a href="/react/">React.js Version</a></li>
          <li><a href="/vue/">Vue.js Version</a></li>
        </ul>
        <h5>Changelog</h5>
        <ul class="list-unstyled">
          <li><a href="/changelog/">AJAX &amp; Static Versions</a></li>
          <li><a href="/angular/changelog">Angular 2+ Version</a></li>
          <li><a href="/react/changelog">React.js Version</a></li>
          <li><a href="/vue/changelog">Vue.js Version</a></li>
        </ul>
      </div>
      <div class="col-md-3">
        <h5>Github</h5>
        <ul class="list-unstyled">
          <li><a href="" target="_blank">CoreUI</a></li>
          <li><a href="" target="_blank">CoreUI for Angular</a></li>
          <li><a href="" target="_blank">CoreUI for React.js</a></li>
          <li><a href="" target="_blank">CoreUI for Vue.js</a></li>
        </ul>
        <h5>Bootstrap implementations</h5>
        <ul class="list-unstyled">
          <li><a href="/angular-bootstrap/">Angular Bootstrap</a></li>
          <li><a href="/react-bootstrap/">React Bootstrap</a></li>
          <li><a href="/vue-bootstrap/">Vue Bootstrap</a></li>
        </ul>
      </div>
      <div class="col-md-3">
        <h5>About Us</h5>
        <ul class="list-unstyled">
          <li><a href="/about/">About Us</a></li>
          <li><a href="/about/services/">Services</a></li>
          <li><a href="/about/legal/cookies/">Cookie Policy</a></li>
          <li><a href="/about/legal/privacy/">Privacy Policy</a></li>
        </ul>
        <h5>Our projects</h5>
        <ul class="list-unstyled">
          <li><a href="https://sketchstrap.io" target="_blank">SketchStrap</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="copyright text-center">
    <div class="container p-3 text-muted">
      © 2018 creativeLabs. Designed and built by <a href="https://twitter.com/lukaszholeczek">@lukaszholeczek</a> and CoreUI Team.
    </div>
  </div>
</footer>
<div id="promo" class="modal fade" tabindex="-1" role="dialog" style="z-index:10000">
  <div class="modal-dialog modal-lg" role="document" style="min-width:1100px;">
    <div class="modal-content">
      <div class="modal-body border-bottom">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="text-center modal-title">
          <h2>Buy CoreUI Standard License now and save 59%</h2>
          <h3 class="text-danger">This is one-time offer!</h3>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-7">
            <div class="row">
              <div class="col-md-12 col-md-offset-0">
                <img src="/assets/img/default-layout.jpg" class="img-fluid" alt="CoreUI Pro Bootstrap Admin Template">
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <ul class="list-unstyled">
              <li class="mb-3">✅ Save thousands of dollars for UI and UX designing.</li>
              <li class="mb-3">✅ Well documented and great support.</li>
              <li class="mb-3">✅ Constantly developed and maintained.</li>
              <li class="mb-3">✅ Free access to future updates.</li>
              <li class="mb-3">✅ Include 6 Versions: <strong>Angular 6, React.js, Vue.js, AJAX, Static, AngularJS</strong></li>
              <li class="mb-4">✅ Default and <strong>dark layout</strong></li>
            </ul>
            <a href="https://gum.co/coreui-pro-s/first-time/?wanted=true" class="btn btn-lg btn-block btn-danger single-init"> Buy now <del>$196</del> $79</a>

            <div class="text-center">
              <small>
                <br/><span class="text-success2"><i class="fa fa-lock"></i> SECURE PAYMENTS</span><br/>
                <img src="/assets/img/payment-methods.png" alt="PayPal Secure Payments" style="height:14px"/><br/><br/>
              </small>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">

        <div class="text-center">
          <div class="text-uppercase mb-3 row">
            <div class="col-md-9 mx-auto">
              <strong>You’re in good company. <span class="text-muted">CoreUI powers thousands of apps at some of the smartest companies around the world.</span></strong>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/nvidia600.png" alt="Nvidia">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/ea600.png" alt="EA">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/dhl600.png" alt="DHL">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/olx600.png" alt="OLX">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/citi600.png" alt="Citi">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/paypal600.png" alt="PayPal">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/virgin-media600.png" alt="Virgin">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/plus500600.png" alt="Plus500">
            </div>
            <div class="col">
              <img class="img-fluid" src="/assets/img/clients/cisco600.png" alt="Cisco">
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/assets/js/vendor/bootstrap.min.js"></script>
<script src="/assets/js/src/application.js"></script>
<script src="/assets/js/src/analytics.js"></script>
<script src="/assets/js/src/first-visit-modal.js"></script>

<script src="/assets/js/src/vatmoss.js"></script>

<script src="/assets/js/docs.min.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>


<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>

<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://buttons.github.io/buttons.js"></script>

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5a0592292bb39f0012e27c9f&product=unknown' async='async'></script>

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) {  L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"272317181a81e4571a8dc53e0","lid":"7a9caf510c"}) })</script>


  </body>
</html>