Issues:
1<!--
2
3=========================================================
4* Pixel Lite Bootstrap UI Kit
5=========================================================
6
7* Product Page: https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit
8* Copyright 2019 Themesberg (https://www.themesberg.com)
9* License Themesberg (Crafty Dwarf LLC) (https://themesberg.com/licensing)
10
11* Coded by https://themesberg.com
12
13=========================================================
14
15* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16
17--><!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- Primary Meta Tags --><title>Pixel Lite - Accessibility first and open source Bootstrap UI Kit</title><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="title" content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit"><meta name="author" content="Themesberg"><meta name="description" content="Open source and accessibility first Bootstrap UI Kit featuring over 80 premium components and 4 example pages."><meta name="keywords" content="bootstrap, bootstrap ui kit, accessiblity, accessibility first, open source, open source bootstrap ui kit"><link rel="canonical" href="https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://demo.themesberg.com/pixel-lite"><meta property="og:title" content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit"><meta property="og:description" content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages."><meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://demo.themesberg.com/pixel-lite"><meta property="twitter:title" content="Pixel Lite - Accessibility first and open source Bootstrap UI Kit"><meta property="twitter:description" content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages."><meta property="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg"><!-- Favicon --><link rel="apple-touch-icon" sizes="120x120" href="./assets/img/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon/favicon-16x16.png"><link rel="manifest" href="./assets/img/favicon/site.webmanifest"><link rel="mask-icon" href="./assets/img/favicon/safari-pinned-tab.svg" color="#ffffff"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><!-- Fontawesome --><link type="text/css" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"><!-- Pixel CSS --><link type="text/css" href="./css/pixel.css" rel="stylesheet"><!-- Fullstory tracking --><script>window['_fs_debug'] = false;
18 window['_fs_host'] = 'fullstory.com';
19 window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
20 window['_fs_org'] = 'S6PW8';
21 window['_fs_namespace'] = 'FS';
22 (function(m,n,e,t,l,o,g,y){
23 if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
24 g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
25 o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
26 y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
27 g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
28 g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
29 g.log = function(a,b){g("log",[a,b])};
30 g.consent=function(a){g("consent",!arguments.length||a)};
31 g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
32 g.clearUserCookie=function(){};
33 g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
34 if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
35 })(window,document,window['_fs_namespace'],'script','user');</script><!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-1"></script><script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-1');</script></head><body><header class="header-global"><nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark"><div class="container position-relative"><a class="navbar-brand mr-lg-5" href="./index.html"><img class="navbar-brand-dark" src="./assets/img/brand/light.svg" alt="Logo light"> <img class="navbar-brand-light" src="./assets/img/brand/dark.svg" alt="Logo dark"></a><div class="navbar-collapse collapse" id="navbar_global"><div class="navbar-collapse-header"><div class="row"><div class="col-6 collapse-brand"><a href="./index.html"><img src="./assets/img/brand/dark.svg" alt="menuimage"></a></div><div class="col-6 collapse-close"><a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"></a></div></div></div><ul class="navbar-nav navbar-nav-hover align-items-lg-center"><li class="nav-item dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Pages</span> <i class="fas fa-angle-down nav-link-arrow ml-2"></i></a><ul class="dropdown-menu"><li><a class="dropdown-item" href="./html/pages/about-company.html">About</a></li><li><a class="dropdown-item" href="./html/pages/contact.html">Contact</a></li><li><a class="dropdown-item" href="./html/pages/pricing.html">Pricing</a></li><li><a class="dropdown-item" href="./html/pages/services.html">Services</a></li></ul></li><li class="nav-item dropdown mega-dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Components</span> <i class="fas fa-angle-down nav-link-arrow ml-2"></i></a><div class="dropdown-menu"><div class="row"><div class="col-lg-6 inside-bg d-none d-lg-block"><div class="justify-content-center bg-tertiary text-white"><div class="px-6 pb-4 pt-5"><img src="./assets/img/megamenu_image.png" alt="image"></div><div class="z-2 pb-4 text-center"><a href="./html/components/all.html" class="btn btn-primary btn-icon animate-up-2 mb-2 mb-sm-0 mr-3"><span class="mr-1"><i class="fas fa-th-large"></i></span> All components </a><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank" class="btn btn-outline-white btn-icon animate-up-2 mb-2 mb-sm-0"><span class="mr-1"><i class="fas fa-book"></i></span> Docs v3.0</a></div></div></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/accordions.html">Accordions</a></li><li><a class="dropdown-item" href="./html/components/alerts.html">Alerts</a></li><li><a class="dropdown-item" href="./html/components/badges.html">Badges</a></li><li><a class="dropdown-item" href="./html/components/cards.html">Cards</a></li><li><a class="dropdown-item" href="./html/components/bootstrap-carousels.html">Bootstrap Carousels</a></li><li><a class="dropdown-item" href="./html/components/breadcrumbs.html">Breadcrumbs</a></li><li><a class="dropdown-item" href="./html/components/buttons.html">Buttons</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/jquery-counters/" target="_blank">Counters <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/buttons/#button-dropdown" target="_blank">Dropdowns <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li></ul></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/e-commerce/" target="_blank">E-commerce <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/forms.html">Forms</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/icon-boxes/" target="_blank">Icon Boxes <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/modals.html">Modals</a></li><li><a class="dropdown-item" href="./html/components/navs.html">Navs</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/owl-carousel/" target="_blank">Owl Carousels <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/pagination.html">Pagination</a></li><li><a class="dropdown-item" href="./html/components/popovers.html">Popovers</a></li><li><a class="dropdown-item" href="./html/components/progress-bars.html">Progress Bars</a></li></ul></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/icon-boxes/#steps" target="_blank">Steps <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/tables.html">Tables</a></li><li><a class="dropdown-item" href="./html/components/tabs.html">Tabs</a></li><li><a class="dropdown-item" href="./html/components/toasts.html">Toasts</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/timelines/" target="_blank">Timelines <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/tooltips.html">Tooltips</a></li><li><a class="dropdown-item" href="./html/components/typography.html">Typography</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/chart-js/" target="_blank">Charts <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://demo.themesberg.com/pixel-pro/html/components/widgets.html">Widgets <span class="badge badge-tertiary text-uppercase ml-3">Pro</span></a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Support</span> <i class="fas fa-angle-down nav-link-arrow ml-2"></i></a><div class="dropdown-menu dropdown-menu-lg"><div class="col-auto px-0" data-dropdown-content><div class="list-group list-group-flush"><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm icon-secondary"><i class="fas fa-file-alt"></i></span><div class="ml-4"><span class="text-dark d-block">Documentation<span class="badge badge-sm badge-secondary ml-2">v3.0</span></span> <span class="small">Examples and guides</span></div></a><a href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm icon-primary"><i class="fas fa-microphone-alt"></i></span><div class="ml-4"><span class="text-dark d-block">Support</span> <span class="small">Found an issue? Let us know!</span></div></a></div></div></div></li></ul></div><div class="d-flex align-items-center"><span class="d-none d-md-inline"><a href="https://demo.themesberg.com/pixel-pro/" target="_blank" class="btn btn-tertiary animate-up-2">Upgrade to Pro</a></span> <a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank" class="btn btn-outline-soft ml-md-3 animate-up-2"><i class="fas fa-book mr-2"></i> Docs v3.0</a> <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></div></div></nav></header><main><div class="preloader bg-dark flex-column justify-content-center align-items-center"><svg id="loader-logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 64 78.4"><path fill="#fff" d="M10,0h1.2V11.2H0V10A10,10,0,0,1,10,0Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40" y="17.6" width="0" height="25.6"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="23" y="35.2" width="0" height="25.6"/><path fill="#fff" d="M52.8,35.2H64V53.8a7,7,0,0,1-7,7H52.8V35.2Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="52.8" width="0" height="25.6"/><path fill="#fff" d="M52.8,0H57a7,7,0,0,1,7,7h0v4.2H52.8V0Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="57.8" y="17.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="35.2" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40.2" y="49.6" width="0" height="11.2"/><path fill="#fff" d="M17.6,67.2H28.8v1.2a10,10,0,0,1-10,10H17.6V67.2Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="28.8" x="31.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" x="14" stroke-width="28.8" y="17.6" width="0" height="11.2"/></svg></div><!-- Hero --><section class="section section bg-primary pb-11 pb-lg-12 text-white overflow-hidden z-2"><div class="container z-2"><div class="row justify-content-center text-center pt-6 pb-3"><div class="col-12 col-md-8"><h1 class="display-1 font-weight-light mb-3">Pixel<span class="pixel-pro-badge font-weight-bolder text-primary">LITE</span></h1><p class="lead px-xl-6 mb-5">Accessibility first <span class="font-weight-bold">User Interface Kit</span> that will help you prototype and design beautiful, creative and modern websites.</p><div class="d-flex flex-column flex-wrap flex-md-row mb-5 justify-content-center align-items-center"><a href="https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit" target="_blank" class="btn btn-tertiary mb-3 mt-2 mr-2 mr-md-3 animate-up-2"><i class="fas fa-cloud-download-alt mr-2"></i> Download</a><div class="mt-1"><!-- Place this tag where you want the button to render. --> <a class="github-button" href="https://github.com/themesberg/pixel-bootstrap-ui-kit" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/pixel-bootstrap-ui-kit on GitHub">Star</a></div></div><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center flex-column mb-6"><img src="./assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo"> <span class="text-muted font-small">A Themesberg production</span></a></div></div></div><figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2"><svg class="fill-white" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 43.4" style="enable-background:new 0 0 1920 43.4;" xml:space="preserve"><path d="M0,23.3c0,0,405.1-43.5,697.6,0c316.5,1.5,108.9-2.6,480.4-14.1c0,0,139-12.2,458.7,14.3 c0,0,67.8,19.2,283.3-22.7v35.1H0V23.3z"></path></svg></figure></section><div class="section py-0"><div class="container mt-n10 mt-lg-n12 z-2"><div class="row justify-content-center"><div class="col-12 col-md-10"><img src="./assets/img/presentation-mockup.png" alt="illustration"></div></div></div></div><section class="section section-lg pb-0"><div class="container"><div class="row"><div class="col-12 col-md-4"><!-- Icon box --><div class="icon-box text-center mb-5 mb-md-0"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><i class="fas fa-box-open"></i></div><h5 class="my-3">80 components</h5><p class="px-lg-4">Beatifully crafted and creative components made with great care for each pixel</p></div><!-- End of Icon box --></div><div class="col-12 col-md-4 mb-5 mb-md-0"><!-- Icon box --><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><i class="fas fa-pager"></i></div><h5 class="my-3">3 sections</h5><p class="px-lg-4">Navigation bars, pricing cards, footers and many more sections to enhance page variety</p></div><!-- End of Icon box --></div><div class="col-12 col-md-4 mb-5 mb-md-0"><!-- Icon box --><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><i class="far fa-file-alt"></i></div><h5 class="my-3">4 example pages</h5><p class="px-lg-4">We took the time to create a few example pages to show you how gorgeous pages can look like</p></div><!-- End of Icon box --></div></div></div></section><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Accordion</h4></div></div></div><!--End of Title section--><div class="section section-md"><div class="container"><div class="row justify-content-center mt-4"><div class="col-12 col-lg-8"><!--Accordion--><div class="accordion" id="accordionExample1"><div class="card card-sm card-body border-light mb-0"><a href="#panel-1" data-target="#panel-1" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Our Company</span> <span class="icon"><i class="fas fa-plus"></i></span></a><div class="collapse" id="panel-1"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body border-light mb-0"><a href="#panel-2" data-target="#panel-2" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Pixel Components</span> <span class="icon"><i class="fas fa-plus"></i></span></a><div class="collapse" id="panel-2"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body border-light"><a href="#panel-3" data-target="#panel-3" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Licenses</span> <span class="icon"><i class="fas fa-plus"></i></span></a><div class="collapse" id="panel-3"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div></div><!--End of Accordion--></div></div></div></div><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Alerts</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row"><div class="col-lg-12"><div class="alert alert-primary" role="alert"><span class="alert-inner--text">This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-secondary" role="alert"><span class="alert-inner--text">This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-success" role="alert"><span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-info" role="alert"><span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-warning" role="alert"><span class="alert-inner--text">This is a warning alert with <a href="#" class="alert-link text-dark">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-danger" role="alert"><span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Badges</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row"><div class="col-lg-6"><div class="mb-4"><h6 class="font-weight-bold">Square Badges</h6></div><span class="badge badge-primary text-uppercase">Primary</span> <span class="badge badge-secondary text-uppercase">Secondary</span> <span class="badge badge-tertiary text-uppercase">Tertiary</span> <span class="badge badge-gray text-uppercase">Gray</span> <span class="badge badge-success text-uppercase">Success</span> <span class="badge badge-danger text-uppercase">Danger</span> <span class="badge badge-warning text-uppercase">Warning</span> <span class="badge badge-info text-uppercase">Info</span></div><div class="col-lg-6"><div class="mb-4"><h6 class="font-weight-bold">Round Badges</h6></div><span class="badge badge-pill badge-primary text-uppercase">Primary</span> <span class="badge badge-pill badge-secondary text-uppercase">Secondary</span> <span class="badge badge-pill badge-tertiary text-uppercase">Tertiary</span> <span class="badge badge-pill badge-gray text-uppercase">Gray</span> <span class="badge badge-pill badge-success text-uppercase">Success</span> <span class="badge badge-pill badge-danger text-uppercase">Danger</span> <span class="badge badge-pill badge-warning text-uppercase">Warning</span> <span class="badge badge-pill badge-info text-uppercase">Info</span></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Cards</h4></div></div></div><!--End of Title section--><div class="section section-md"><div class="container"><div class="row mb-5"><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card border-light"><img src="./assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image"><div class="card-body"><span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span><h5 class="card-title mt-3">We partnered up with Ildiesign</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary btn-sm">Read More</a></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-7 mb-lg-0"><div class="card overflow-hidden"><div class="position-relative"><img src="./assets/img/team/profile-picture-1.jpg" class="card-img-top" alt="image"></div><div class="card-body position-relative mt-n6 mx-2 bg-white text-center rounded border border-light"><h5 class="card-title">Neil D. Sims</h5><span class="text-gray"><i class="fas fa-map-marker-alt mr-2"></i>New York, USA</span><p class="mt-3">Neil drives the technical strategy of the platform and brand.</p><div class="btn-group"><button class="btn btn-secondary btn-icon"><span class="mr-1"><i class="far fa-user"></i></span> Follow</button> <button class="btn btn-primary"><i class="far fa-envelope"></i></button></div></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card border-light text-center"><!-- Header --><div class="card-header bg-white p-3"><h3 class="text-primary mb-4">Basic</h3><span class="d-block"><span class="display-1 text-dark font-weight-bold"><span class="align-top font-medium">$</span>19 </span><span class="d-block text-gray font-small">/ month</span></span></div><!-- End Header --><!-- Content --><div class="card-body"><ul class="list-unstyled mb-4"><li class="list-item pb-3"><strong>1</strong> free domain</li><li class="list-item pb-3">Storage space: <strong>5GB</strong></li><li class="list-item pb-3"><strong>100k</strong> monthly visitors</li><li class="list-item pb-3">One-click staging site</li><li class="list-item pb-3">Search engine wizard</li><li class="list-item pb-3">Community support</li></ul><button type="button" class="btn btn-primary btn-block animate-up-1">Start Starter</button></div><!-- End Content --></div></div><div class="col-12 mt-5"><div class="card border-light px-4 py-5 text-center"><div class="card-header bg-white pb-0"><h2 class="h1 mb-3">Get the most out of your network.</h2></div><div class="card-body pt-2 px-0 px-lg-7"><p class="mb-5 lead">Contact management designed for teams and individuals</p><div class="row justify-content-center"><div class="col-12 col-md-8"><div class="form-group"><div class="d-flex flex-row justify-content-center"><div class="input-group"><input class="form-control form-control-xl border-light" placeholder="Your email address" type="email"><div class="input-group-prepend"><button type="submit" class="btn btn-primary rounded-right">Subscribe</button></div></div></div></div></div></div></div></div></div></div></div></div><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Carousels</h4></div></div></div><!-- Section --><section class="section section-md"><div class="container"><div class="row"><div class="col-md-10 mx-auto"><!-- Carousel --><div id="Carousel2" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100 rounded" src="./assets/img/carousel/image-1.jpg" alt="First slide"></div><div class="carousel-item"><img class="d-block w-100 rounded" src="./assets/img/carousel/image-2.jpg" alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100 rounded" src="./assets/img/carousel/image-3.jpg" alt="Third slide"></div></div><a class="carousel-control-prev" href="#Carousel2" 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="#Carousel2" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div><!-- End of Carousel --></div></div></div></section><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Breadcrumbs</h4></div></div></div><!-- Section --><section class="section section-md"><div class="container"><div class="row"><div class="col-12"><div class="mb-6"><!--Breadcrumb--><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><!--End of Breadcrumb--><!--Breadcrumb--><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><!--End of Breadcrumb--><!--Breadcrumb--><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><!--End of Breadcrumb--><!--Breadcrumb--><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><!--End of Breadcrumb--></div></div></div></div></section><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Buttons</h4></div></div></div><!--End of Title section--><div class="section section-md components-section"><div class="container"><div class="row"><div class="col-lg-12"><div class="mb-3"><h5>Main Buttons</h5></div><!--Buttons--> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button"><span class="mr-1"><i class="fas fa-book-open"></i></span> Icon Left</button> <button class="btn btn-primary" type="button">Icon Right <span class="ml-1"><i class="fas fa-book-open"></i></span></button> <button class="btn btn-icon-only btn-primary" type="button"><i class="far fa-heart"></i></button><!--End of Buttons--><!--End of Buttons--><div class="mb-3 mt-5"><h5>Outline Buttons</h5></div><!--Buttons--> <button class="btn btn-outline-primary" type="button">Outline-primary</button> <button class="btn btn-outline-primary" type="button"><span class="mr-1"><i class="far fa-save"></i></span> Icon Left</button> <button class="btn btn-outline-primary" type="button">Icon Right <span class="ml-1"><i class="far fa-save"></i></span></button> <button class="btn btn-icon-only btn-outline-primary" type="button"><i class="far fa-thumbs-up"></i></button><!--End of Buttons--><div class="mb-3 mt-5"><h5>Sizes</h5></div><!--Buttons--> <button class="btn btn-sm btn-primary" type="button">Small</button> <button class="btn btn-primary" type="button">Regular</button> <button class="btn btn-lg btn-primary" type="button">Large Button</button><!--End of Buttons--><!-- Button colors --><div class="mb-3 mt-5"><h5>Choose your color</h5></div><div class="mb-3 mt-5"><small class="text-uppercase font-weight-bold">Main</small></div><!--Buttons--> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-secondary" type="button">Secondary</button> <button class="btn btn-tertiary" type="button">Tertiary</button> <button class="btn btn-info" type="button">Info</button> <button class="btn btn-success" type="button">Success</button> <button class="btn btn-warning" type="button">Warning</button> <button class="btn btn-danger" type="button">Danger</button> <button class="btn btn-dark" type="button">Dark</button> <button class="btn btn-gray" type="button">Gray</button> <button class="btn btn-light" type="button">Light</button> <button class="btn btn-white" type="button">White</button><!--End Of Buttons--><div class="mb-3 mt-5"><small class="text-uppercase font-weight-bold">Outline</small></div><!--Buttons--> <button class="btn btn-outline-primary" type="button">Primary</button> <button class="btn btn-outline-secondary" type="button">Secondary</button> <button class="btn btn-outline-tertiary" type="button">Tertiary</button> <button class="btn btn-outline-info" type="button">Info</button> <button class="btn btn-outline-success" type="button">Success</button> <button class="btn btn-outline-warning" type="button">Warning</button> <button class="btn btn-outline-danger" type="button">Danger</button> <button class="btn btn-outline-dark" type="button">Dark</button> <button class="btn btn-outline-gray" type="button">Gray</button></div><div class="row"><div class="col-12 col-lg-4"><!-- Button Social --><div class="mb-4 mt-5"><h6>Social Buttons</h6></div><button class="btn btn-twitter" type="button"><span class="mr-1"><i class="fab fa-twitter"></i></span> Login with Twitter</button><br><button class="btn btn-facebook" type="button"><span class="mr-1"><i class="fab fa-facebook-f"></i></span> Login with Facebook</button><br><button class="btn btn-instagram" type="button"><span class="mr-1"><i class="fab fa-instagram"></i></span> Follow on Instagram</button><br><button class="btn btn-pinterest" type="button"><span class="mr-1"><i class="fab fa-pinterest-p"></i></span> Share on Pinterest</button></div><div class="col-12 col-lg-4"><!-- Button Social --><div class="mb-4 mt-5"><h6>Round Social Buttons</h6></div><button class="btn btn-pill btn-twitter" type="button"><span class="mr-1"><i class="fab fa-twitter"></i></span> Login with Twitter</button><br><button class="btn btn-pill btn-facebook" type="button"><span class="mr-1"><i class="fab fa-facebook-f"></i></span> Login with Facebook</button><br><button class="btn btn-pill btn-instagram" type="button"><span class="mr-1"><i class="fab fa-instagram"></i></span> Follow on Instagram</button><br><button class="btn btn-pill btn-pinterest" type="button"><span class="mr-1"><i class="fab fa-pinterest-p"></i></span> Share on Pinterest</button></div><div class="col-12 col-lg-1"><!-- Square --><div class="mb-4 mt-5"><h6>Square</h6></div><button class="btn btn-icon-only btn-twitter" type="button"><i class="fab fa-twitter"></i></button> <button class="btn btn-icon-only btn-facebook" type="button"><i class="fab fa-facebook-f"></i></button> <button class="btn btn-icon-only btn-instagram" type="button"><i class="fab fa-instagram"></i></button> <button class="btn btn-icon-only btn-pinterest" type="button"><i class="fab fa-pinterest-p"></i></button></div><div class="col-12 col-lg-1"><!-- Circle --><div class="mb-4 mt-5"><h6>Circle</h6></div><button class="btn btn-icon-only btn-pill btn-twitter" type="button"><i class="fab fa-twitter"></i></button> <button class="btn btn-icon-only btn-pill btn-facebook" type="button"><i class="fab fa-facebook-f"></i></button> <button class="btn btn-icon-only btn-pill btn-instagram" type="button"><i class="fab fa-instagram"></i></button> <button class="btn btn-icon-only btn-pill btn-pinterest" type="button"><i class="fab fa-pinterest-p"></i></button></div></div></div></div></div><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Forms</h4></div></div></div><!-- Section --><section class="section section-md pb-0"><div class="container"><!-- Title --><div class="row"><div class="col-md-4"><div class="mb-5"><h5>Default Forms</h5></div></div></div><!-- End of Title --><div class="row"><div class="col-lg-4 col-sm-6"><!-- Form --><div class="form-group"><input type="text" placeholder="Default" class="form-control"></div><!-- End of Form --><!-- Form --><div class="form-group"><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-search"></i></span></div><input class="form-control" placeholder="Icon Left" type="text"></div></div><!-- End of Form --><!-- Form --><div class="form-group"><div class="input-group mb-4"><input class="form-control" placeholder="Password" type="password"><div class="input-group-append"><span class="input-group-text"><i class="fas fa-unlock-alt"></i></span></div></div></div><!-- End of Form --><!-- Form --><div class="custom-file"><input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label></div><!-- End of Form --></div><div class="col-lg-4 col-sm-6"><!-- Form --><div class="form-group mt-3 mt-sm-0"><input type="text" placeholder="Disabled" class="form-control" disabled="disabled"></div><!-- End of Form --><!-- Form --><div class="form-group"><div class="input-group mb-4"><input class="form-control" placeholder="Icon Right" type="text"><div class="input-group-append"><span class="input-group-text"><i class="fas fa-search"></i></span></div></div></div><!-- End of Form --><!-- Form --><div class="form-group"><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-unlock-alt"></i></span></div><input class="form-control" placeholder="Password" type="password"></div></div><!-- End of Form --><!-- Form --><div class="form-group"><textarea class="form-control" placeholder="Enter your message..." id="exampleFormControlTextarea" rows="4"></textarea></div><!-- End of Form --></div><div class="col-lg-4 col-sm-6"><!-- Form --><div class="form-group has-success"><input type="text" placeholder="Success Input" class="form-control is-valid"></div><!-- End of Form --><!-- Form --><div class="form-group has-danger mb-4"><input type="email" placeholder="Error Input" class="form-control is-invalid"></div><!-- End of Form --><!-- Form --><div class="form-group"><select class="custom-select mr-sm-2" id="inlineFormCustomSelect"><option>Select your country</option><option>Italia</option><option>USA</option><option>England</option><option>France</option></select></div><!-- End of Form --></div></div></div></section><!-- End of Section --><!-- Section --><div class="section section-md"><div class="container"><h5>Datepicker</h5><div class="row mt-5 mb-5"><div class="col-md-4"><!-- Form --> <small class="d-block font-weight-normal mb-3">Date of birth</small><div class="form-group"><div class="input-group input-group-border"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2018"></div></div><!-- End of Form --></div><div class="col-md-8 mt-4 mt-md-0"><!-- Form --> <small class="d-block font-weight-normal mb-3">Employment Period</small><div class="input-daterange datepicker row align-items-center"><div class="col"><div class="form-group"><div class="input-group input-group-border"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input class="form-control" placeholder="Start date" type="text" value="06/18/2018"></div></div></div><div class="col"><div class="form-group"><div class="input-group input-group-border"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input class="form-control" placeholder="End date" type="text" value="06/22/2018"></div></div></div></div><!-- End of Form --></div></div><h5>Range Sliders</h5><div class="row mt-5 mb-5"><div class="col-lg-6 col-sm-6"><!-- Simple slider --><div class="input-slider-container"><div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div><!-- Input slider values --><div class="row mt-3 d-none"><div class="col-6"><span class="range-slider-value" data-range-value-low="200"></span></div></div></div><!-- End of Slider --></div><!-- Range slider --><div class="col-lg-6 col-sm-6"><!-- Range slider container --><div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div><!-- Range slider values --><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span></div></div><!-- End of range slider values --></div></div><div class="row mt-5"><div class="col-lg-6 col-sm-6 my-5 my-md-0"><!-- Range slider container --><div id="input-slider-range-2" data-range-value-min="100" data-range-value-max="500"></div><!-- Range slider values --><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-2"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-2"></span></div></div><!-- End of range slider values --></div><div class="col-3 offset-md-2 col-lg-2"><!-- Range slider container --><div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500"></div><!-- Range slider values --><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3"></span></div></div><!-- End of range slider values --></div><div class="col-3 col-lg-2"><!-- Range slider container --><div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500"></div><!-- Range slider values --><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4"></span></div></div><!-- End of range slider values --></div></div><h5 class="mt-5 mt-md-0">Custom Forms</h5><div class="row"><div class="col-lg-3 col-md-6"><div class="mb-3"><small class="font-weight-bold">Checkboxes</small></div><!-- Checkbox --><div class="form-check mb-3"><label class="form-check-label"><input class="form-check-input" type="checkbox"> <span class="form-check-sign"></span> Unchecked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check"><label class="form-check-label"><input class="form-check-input" type="checkbox" checked="checked"> <span class="form-check-sign"></span> Checked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check disabled"><label class="form-check-label"><input class="form-check-input" type="checkbox" disabled="disabled"> <span class="form-check-sign"></span> Disabled Unchecked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check disabled"><label class="form-check-label"><input class="form-check-input" type="checkbox" checked="checked" disabled="disabled"> <span class="form-check-sign"></span> Disabled Checked</label></div><!-- End of Checkbox --></div><div class="col-lg-3 col-md-6"><!-- Checkboxes --><div class="mb-3"><small class="font-weight-bold">Checkboxes Round</small></div><!-- Checkbox --><div class="form-check round-check mb-3"><label class="form-check-label"><input class="form-check-input" type="checkbox"> <span class="form-check-sign"></span> Unchecked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check round-check"><label class="form-check-label"><input class="form-check-input" type="checkbox" checked="checked"> <span class="form-check-sign"></span> Checked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check round-check disabled"><label class="form-check-label"><input class="form-check-input" type="checkbox" disabled="disabled"> <span class="form-check-sign"></span> Disabled Unchecked</label></div><!-- End of Checkbox --><!-- Checkbox --><div class="form-check round-check disabled"><label class="form-check-label"><input class="form-check-input" type="checkbox" checked="checked" disabled="disabled"> <span class="form-check-sign"></span> Disabled Checked</label></div><!-- End of Checkbox --></div><div class="col-lg-3 col-sm-6 mt-4 mt-md-0"><!-- Radio buttons --><div class="mb-3"><small class="font-weight-bold">Radios</small></div><!-- Radio --><div class="form-check form-check-radio"><label class="form-check-label"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"> <span class="form-check-sign"></span> Radio is off</label></div><!-- End of Radio --><!-- Radio --><div class="form-check form-check-radio"><label class="form-check-label"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="checked"> <span class="form-check-sign"></span> Radio is on</label></div><!-- End of Radio --><!-- Radio --><div class="form-check form-check-radio disabled"><label class="form-check-label"><input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios3" value="option3" disabled="disabled"> <span class="form-check-sign"></span> Disabled radio is off</label></div><!-- End of Radio --><!-- Radio --><div class="form-check form-check-radio disabled"><label class="form-check-label"><input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios4" value="option4" disabled="disabled" checked="checked"> <span class="form-check-sign"></span> Disabled radio is on</label></div><!-- End of Radio --></div><div class="col-lg-3 col-sm-6 mt-4 mt-md-0"><div class="mb-3"><small class="font-weight-bold">Switches</small></div><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label></div><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" disabled="disabled" id="customSwitch2"> <label class="custom-control-label" for="customSwitch2">Disabled switch element</label></div></div><div class="col-lg-6 col-sm-6 mt-4"><div class="mb-3"><small class="font-weight-bold">Tags Input</small></div><!-- Tags Input --> <input type="text" class="form-control" value="Bootstrap,Angular,Vue,Wordpress,React,Java,Php,Gulp" data-role="tagsinput"><!-- End of Tags Input --></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Modals</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row mt-4"><div class="col-md-4"><!-- Button Modal --> <button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-default">Default</button><!-- Modal Content --><div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h6 class="modal-title">Terms of Service</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p><p>The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p></div><div class="modal-footer"><button type="button" class="btn btn-sm btn-secondary">I Got It</button> <button type="button" class="btn btn-link text-danger ml-auto" data-dismiss="modal">Close</button></div></div></div></div><!-- End of Modal Content --></div><div class="col-md-4"><!-- Button Modal --> <button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-notification">Notification</button><!-- Modal Content --><div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true"><div class="modal-dialog modal-info modal-dialog-centered" role="document"><div class="modal-content bg-gradient-secondary"><div class="modal-header"><p class="modal-title" id="modal-title-notification">A new experience, personalized for you.</p><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><div class="py-3 text-center"><span class="modal-icon display-1-lg"><i class="far fa-envelope-open"></i></span><h4 class="modal-title my-3">Important message!</h4><p>Do you know that you can assign status and relation to a company right in the visit list?.</p></div></div><div class="modal-footer"><button type="button" class="btn btn-sm btn-white">Go to Inbox</button></div></div></div></div><!-- End of Modal Content --></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Navs</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row"><div class="col-md-10"><!-- Nav Wrapper --><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-fill flex-column flex-sm-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a></li></ul></div><!-- End of Nav Wrapper --></div></div><!-- Title --><div class="row mt-5 mb-3"><div class="col-md-4"><div class="mb-2"><h5>Round Pill</h5></div></div></div><!-- End of Title --><div class="row"><div class="col-md-10"><!-- Nav Wrapper --><div class="nav-wrapper position-relative"><ul class="nav nav-pills rounded nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a></li></ul></div><!-- End of Nav Wrapper --></div></div><!-- Title --><div class="row mt-5 mb-3"><div class="col-md-4"><div class="mb-2"><h5>Pills with Icons</h5></div></div></div><!-- End of Title --><div class="row"><div class="col-md-10"><!-- Nav Wrapper --><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><i class="fas fa-tachometer-alt"></i>Dashboard</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-user-circle"></i>Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-sun"></i>Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-comments mr-2"></i>Messages</a></li></ul></div><!-- End of Nav Wrapper --></div></div><!-- Title --><div class="row mt-5 mb-3"><div class="col-md-4"><div class="mb-2"><h5>Vertical Pills</h5></div></div></div><!-- End of Title --><div class="row"><div class="col-md-3"><!-- Nav Wrapper --><div class="nav-wrapper position-relative"><ul class="nav nav-pills square nav-fill flex-column vertical-tab"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#"><span class="d-block"><i class="fas fa-dungeon"></i>Home</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#"><span class="d-block"><i class="far fa-user-circle"></i>Profile</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#"><span class="d-block"><i class="far fa-sun"></i>Settings</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#"><span class="d-block"><i class="far fa-comments mr-2"></i>Messages</span></a></li></ul></div><!-- End of Nav Wrapper --></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Pagination</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><!-- Section title--><div class="row"><div class="col-md-4"><div class="mb-1"><h5>Square pagination</h5></div></div></div><!--End section title--><div class="row mt-4"><div class="col-md-6"><div class="mb-4"><small class="font-weight-bold">Square pagination with icon-nav</small></div><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li></ul></nav></div><div class="col-md-6"><div class="mt-4 mb-4 mt-sm-0"><small class="font-weight-bold">Square pagination with text-nav</small></div><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav></div></div><!-- Section title--><div class="row mt-5"><div class="col-md-4"><div class="mb-1"><h5>Round pagination</h5></div></div></div><!--End section title--><div class="row mt-4"><div class="col-lg-6"><div class="mb-4"><small class="font-weight-bold">Round pagination with icon-nav</small></div><nav aria-label="Page navigation example"><ul class="pagination circle-pagination"><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li></ul></nav></div><div class="col-lg-6"><div class="mt-4 mb-4 mt-sm-0"><small class="font-weight-bold">Basic round pagination</small></div><nav aria-label="Page navigation example"><ul class="pagination circle-pagination"><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li></ul></nav></div></div><!-- Section title--><div class="row mt-5"><div class="col-md-4"><div class="mb-1"><h5>Options</h5></div></div></div><!--End section title--><div class="row mt-4"><div class="col-lg-6"><div class="mb-4"><small class="font-weight-bold">Disabled and active states</small></div><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item disabled"><a class="page-link" tabindex="-1" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav></div><div class="col-lg-6"><div class="mt-4 mb-4 mt-sm-0"><small class="font-weight-bold">Choose your size</small></div><nav aria-label="Page navigation example"><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li></ul></nav><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li></ul></nav><nav aria-label="Page navigation example"><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li></ul></nav></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Progress bars</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row justify-content-center"><div class="col-lg-6"><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-primary">Primary Color</span></div><div class="progress-percentage"><span>50%</span></div></div><div class="progress"><div class="progress-bar bg-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-secondary">Secondary Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-tertiary">Tertiary Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-dark">Dark Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-gray">Gray Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-success">Success Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-info">Info Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-danger">Danger Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-warning">Warning Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Tables</h4></div></div></div><!-- End of Hero --><div class="section section-md"><div class="container"><div class="row justify-content-center"><div class="col-lg-12"><div class="mb-5"><h6 class="mb-3">Default table</h6><table class="table"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Actions</th></tr></thead><tbody><tr><th scope="row">1</th><td><div class="d-flex align-items-center">Zoltan <span class="badge badge-primary ml-2">Pro</span></div></td><td>Robi</td><td><div class="d-flex"><i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i> <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i></div></td></tr><tr><th scope="row">2</th><td><div class="d-flex align-items-center">Jacob <span class="badge badge-secondary ml-2">Mid</span></div></td><td>Thornton</td><td><div class="d-flex"><i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i> <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i></div></td></tr><tr><th scope="row">3</th><td><div class="d-flex align-items-center">Larry <span class="badge badge-tertiary ml-2">Noob</span></div></td><td>the Bird</td><td><div class="d-flex"><i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item"></i> <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item"></i></div></td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Dark table</h6><table class="table table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Table head colors</h6><table class="table"><thead class="thead-dark"><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table><table class="table"><thead class="thead-light"><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Striped rows</h6><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Table bordered</h6><table class="table table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h6 class="mb-3 mt-5">Table bordered dark</h6><table class="table table-bordered table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Hoverable rows</h6><table class="table table-hover"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h6 class="mb-3 mt-5">Hoverable dark rows</h6><table class="table table-hover table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="mb-5"><h6 class="mb-3">Small tables</h6><table class="table table-sm"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table><h6 class="mb-3 mt-5">Small dark tables</h6><table class="table table-sm table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Zoltan</td><td>Robi</td><td>@calota</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></div></div></div><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Tabs</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row justify-content-center"><div class="col-12 col-md-10 col-lg-8"><!-- Tab Nav --><div class="nav-wrapper position-relative mb-2"><ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-text" role="tablist"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Home</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="false">Messages</a></li></ul></div><!-- End of Tab Nav --><!-- Tab Content --><div class="card"><div class="card-body p-0"><div class="tab-content" id="tabcontent1"><div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab"><p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div></div></div></div><!-- End of Tab Content --></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Toasts</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><div class="row mt-4"><div class="col-md-6 col-lg-4"><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header text-primary"><i class="fab fa-bootstrap"></i> <strong class="mr-auto ml-2">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div><div class="col-md-6 col-lg-4"><div class="toast bg-primary text-white fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header text-primary"><i class="fab fa-bootstrap"></i> <strong class="mr-auto ml-2">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div><div class="col-md-6 col-lg-4"><div class="toast bg-tertiary text-white fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header bg-tertiary text-white"><i class="fab fa-bootstrap"></i> <strong class="mr-auto ml-2">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span class="text-white" aria-hidden="true">×</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Tooltips</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><!-- End of Title --><div class="row mt-5"><div class="col-lg-12 d-block d-md-flex justify-content-around"><button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div></div></div></div><!-- End of Section --><div class="section section-sm pb-0 mb-n4"><div class="container"><div class="row justify-content-center"><h4>Typography</h4></div></div></div><!-- Section --><div class="section section-md"><div class="container"><!-- Title --><div class="row"><div class="col-md-4"><div class="mb-5"><h6 class="font-weight-bold">Headings</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-12"><h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Customizing headings</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-12"><h1>Fancy display heading <small class="text-muted">With faded secondary text</small></h1><h2>Fancy display heading <small class="text-muted">With faded secondary text</small></h2><h3>Fancy display heading <small class="text-muted">With faded secondary text</small></h3><h4>Fancy display heading <small class="text-muted">With faded secondary text</small></h4><h5>Fancy display heading <small class="text-muted">With faded secondary text</small></h5><h6>Fancy display heading <small class="text-muted">With faded secondary text</small></h6></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Display headings</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-12"><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Paragraphs</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-6"><div class="mb-3"><h6 class="font-weight-bold">Simple paragraph</h6></div><p>Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.</p></div><div class="col-md-6"><div class="mt-5 mb-3 mt-sm-0"><h6 class="font-weight-bold">Lead paragraph</h6></div><p class="lead">Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.</p></div></div><div class="row mt-5 py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Light text</small></div><div class="col-sm-10"><p class="text-light mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Muted text</small></div><div class="col-sm-10"><p class="text-muted mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Dark text</small></div><div class="col-sm-10"><p class="text-dark mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Primary text</small></div><div class="col-sm-10"><p class="text-primary mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Secondary text</small></div><div class="col-sm-10"><p class="text-secondary mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Tertiary text</small></div><div class="col-sm-10"><p class="text-tertiary mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Info text</small></div><div class="col-sm-10"><p class="text-info mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Danger text</small></div><div class="col-sm-10"><p class="text-danger mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Success text</small></div><div class="col-sm-10"><p class="text-success mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Warning text</small></div><div class="col-sm-10"><p class="text-warning mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Inline Text Elements</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-6"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Blockquote</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-8"><blockquote class="blockquote text-center">Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.<footer class="blockquote-footer mt-3 text-primary">Zoltan Szőgyényi</footer></blockquote></div></div><!-- Title --><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><h6 class="font-weight-bold">Lists</h6></div></div></div><!-- End of Title --><div class="row"><div class="col-md-6"><div class="mb-3"><h6 class="font-weight-bold">Unordered</h6></div><ul><li>Minutes of the last meeting</li><li>Do we need yet more meetings?</li><li>Any other business<ul><li>Programming</li><li>Web Design</li><li>Database</li></ul></li><li>Something funny</li></ul></div><div class="col-md-6"><div class="mt-5 mb-3 mt-sm-0"><h6 class="font-weight-bold">Ordered</h6></div><ol><li>Minutes of the last meeting</li><li>Do we need yet more meetings?</li><li>Any other business<ol><li>Programming</li><li>Web Design</li><li>Database</li></ol></li><li>Something funny</li></ol></div></div></div></div><!-- End of Section --><section class="section section-md bg-soft"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">4 hand-crafted example pages</h2></div></div><div class="row"><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/about-company.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src=".//assets/img/presentation/all-pages/about-company.jpg" alt="About company page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">About company<i class="fas fa-external-link-alt ml-2"></i></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/pricing.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src=".//assets/img/presentation/all-pages/pricing.jpg" alt="Pricing page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Pricing<i class="fas fa-external-link-alt ml-2"></i></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/services.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src=".//assets/img/presentation/all-pages/services.jpg" alt="Services page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Services<i class="fas fa-external-link-alt ml-2"></i></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/contact.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src=".//assets/img/presentation/all-pages/contact.jpg" alt="Contact page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Contact<i class="fas fa-external-link-alt ml-2"></i></h6></div></a></div></div></div></section><section class="section section-lg bg-tertiary"><div class="container"><div class="row justify-content-center"><div class="col-lg-8 text-center text-white"><h1 class="font-weight-light">Notable <span class="font-weight-bold">features</span></h1><p class="lead">You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use</p></div></div><div class="row mt-6 text-white"><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fab fa-bootstrap"></i></div><h5 class="my-3">Latest Bootstrap</h5><p>A responsive and mobile-first theme built with the world's most popular CSS framework</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fab fa-sass"></i></div><h5 class="my-3">Build with Sass</h5><p>Change one variable and the theme adapts. Colors, fonts, sizes, buttons... you name it</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fas fa-mobile-alt"></i></div><h5 class="my-3">Responsive Design</h5><p>Did you know 53% of the world web traffic is mobile? Pixel is fully responsive and mobile first</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fas fa-puzzle-piece"></i></div><h5 class="my-3">Modular approach</h5><p>Nicely customized components that can be reused anytime and anywhere in your project</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fab fa-gulp"></i></div><h5 class="my-3">Gulp & BrowserSync</h5><p>With our custom Gulp commands & BrowserSync we offer a seemless and fast workflow for your project</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fas fa-file-alt"></i></div><h5 class="my-3">Well documented</h5><p>Our kit is delivered with very detailed documentation, describing all components, styles and usages</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center"><div class="icon"><i class="fas fa-tachometer-alt"></i></div><h5 class="my-3">Google PageSpeed</h5><p>Pixel has 80+ scores on Google PageSpeed Insights to offer you and your clients a fast website</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><i class="fas fa-image"></i></div><h5 class="my-3">SVG illustrations</h5><p>Photography and Illustration SVGs are included in the download package and are free to use</p></div><!-- End of Icon box --></div><div class="col-md-4"><!-- Icon box --><div class="icon-box text-lg-center mb-5"><div class="icon"><img class="navbar-brand-dark" style="height: 37px;" src="./assets/img/brand/light.svg" alt="menuimage"></div><h5 class="my-3">Every pixel matters</h5><p>We crafted each component with great care so that no rouge pixel is left behind</p></div><!-- End of Icon box --></div></div></div></section><section class="section section-lg line-bottom-soft"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">What's inside?</h2><p class="lead px-lg-8">We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.</p></div></div><div class="row d-flex align-items-center"><div class="col-12 col-lg-6 mb-4"><div class="d-none d-lg-block mt-5"><h4>You need only HTML, CSS and Javascript?</h4><p class="lead mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/file-structure/" target="_blank" class="btn btn-md btn-secondary animate-up-2"><i class="fas fa-book mr-2"></i> Docs v3.0</a></div></div><div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center"><ul class="d-block fmw-100 list-style-none folder-structure"><li data-toggle="tooltip" data-placement="left" title="Main folder that you will be working with"><i class="fas fa-folder mr-2"></i>src</li><li><ul class="list-style-none pl-4"><li data-toggle="tooltip" data-placement="left" title="CSS, Images, Fonts and Javascript"><i class="fas fa-folder mr-2"></i> assets</li><li data-toggle="tooltip" data-placement="left" title="HTML templates"><i class="fas fa-folder mr-2"></i> html</li><li data-toggle="tooltip" data-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><i class="fas fa-folder mr-2"></i> partials</li><li data-toggle="tooltip" data-placement="left" title="Sass source files"><i class="fas fa-folder mr-2"></i> scss</li><li data-toggle="tooltip" data-placement="left" title="The page you're looking at right now. Call it inception."><i class="fab fa-html5 mr-2 text-secondary"></i> index.html</li></ul></li><li data-toggle="tooltip" data-placement="left" title="Pixel with only HTML, CSS and Javascript"><i class="fas fa-folder mr-2 text-muted"></i> html&css</li><li data-toggle="tooltip" data-placement="left" title="Temporary folder that is created when serving files with BrowserSync"><i class="fas fa-folder text-muted mr-2"></i>.temp</li><li data-toggle="tooltip" data-placement="left" title="Minified version of the project"><i class="fas fa-folder mr-2 text-muted"></i> dist</li><li data-toggle="tooltip" data-placement="left" title="Project dependencies from package.json"><i class="fas fa-folder text-muted mr-2"></i> node_modules</li><li data-toggle="tooltip" data-placement="left" title="Development workflow commands. We have them well documented."><i class="fab fa-js-square mr-2 text-warning"></i> gulpfile.js</li><li data-toggle="tooltip" data-placement="left" title="Project details and dependencies."><i class="fas fa-file-code mr-2 text-tertiary"></i> package.json</li><li data-toggle="tooltip" data-placement="left" title="No project can miss a README :)"><i class="fas fa-file-code mr-2 text-tertiary"></i> README.md</li><li data-toggle="tooltip" data-placement="left" title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)"><i class="fas fa-file-code mr-2 text-tertiary"></i> .gitignore</li></ul></div><div class="col-12 mt-5 d-lg-none"><h5>You need only HTML, CSS and Javascript?</h5><p>Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p></div></div></div></section><section class="section section-lg bg-primary"><div class="container"><div class="row justify-content-center text-center text-white"><div class="col-lg-10 col-xl-12"><h1 class="font-weight-light mb-4">WCAG 2.1 accessible <span class="font-weight-bold">color scheme</span></h1><p class="lead">We've enhanced Bootstrap’s color settings<br>to comply with the latest accessibility standards</p></div></div><div class="row mt-6"><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-soft bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-primary m-auto"></div><div class="mt-4"><h6 class="text-dark">Primary:</h6><span class="font-weight-bold text-primary">#174F84</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-soft bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-secondary m-auto"></div><div class="mt-4"><h6 class="text-dark">Secondary:</h6><span class="font-weight-bold text-secondary">#10AB7C</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-tertiary m-auto"></div><div class="mt-4"><h6 class="text-white">Tertiary:</h6><span class="font-weight-bold text-tertiary">#FF7F66</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-info m-auto"></div><div class="mt-4"><h6 class="text-white">Info:</h6><span class="font-weight-bold text-info">#1E90FF</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-warning m-auto"></div><div class="mt-4"><h6 class="text-white">Warning:</h6><span class="font-weight-bold text-warning">#F5B759</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-success m-auto"></div><div class="mt-4"><h6 class="text-white">Success:</h6><span class="font-weight-bold text-success">#00BF9A</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-danger m-auto"></div><div class="mt-4"><h6 class="text-white">Danger:</h6><span class="font-weight-bold text-danger">#FA5252</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-dark m-auto"></div><div class="mt-4"><h6 class="text-white">Dark:</h6><span class="font-weight-bold text-dark">#2A354F</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-light m-auto"></div><div class="mt-4"><h6 class="text-white">Light:</h6><span class="font-weight-bold text-light">#DDE1ED</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-dark p-5 text-center mb-4"><div class="color-shape rounded bg-soft m-auto"></div><div class="mt-4"><h6 class="text-white">Soft:</h6><span class="font-weight-bold text-light">#EFF2F5</span></div></div></div></div></div></section><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center text-center text-dark mb-5"><div class="col-lg-9 col-xl-8"><h2 class="h1 font-weight-light mb-3">Less <span class="font-weight-bold">work</span>, more <span class="font-weight-bold">flow</span>.</h2><p class="lead">Boost productivity with BrowserSync. SCSS changes are reflected instantly and pages scroll and refresh on devices as you work.</p></div></div><div class="row justify-content-center mb-6"><div class="col-md-10 col-xl-9"><div class="position-relative"><div class="rounded bg-dark p-4 text-white mb-2"><div class="mb-3"><div class="font-weight-normal">> $ npm install</div><div class="text-muted">Everything’s installed!</div></div><div class="mb-3"><div class="font-weight-normal">> $ gulp</div><div class="text-muted">SCSS watching</div><div class="text-muted">LiveReload started</div><div class="text-muted">Opening localhost:3000</div></div><div><div class="font-weight-normal">> $ that's it?</div><div class="text-muted">It's that simple!</div></div></div></div><div class="alert alert-dark position-relative mt-4"><i class="fas fa-question-circle mr-2"></i> Looks unfamiliar? Don’t worry! Our <a class="text-white font-weight-bold text-underline" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">documentation</a> has got you covered.</div></div></div></div></section><section class="section section-lg bg-white"><div class="container"><div class="row"><div class="col-12 col-lg-8"><h2 class="h1 font-weight-light mb-3"><strong>Open source</strong> project</h2><p class="lead mb-4">Pixel Lite is an open source UI Kit that is licensed under the very permissive MIT License. Consider giving us a star on the official Github repository to spread the news!</p><div class="d-flex align-items-center"><a href="https://github.com/themesberg/pixel-bootstrap-ui-kit" target="_blank" class="btn btn-tertiary mr-4 animate-up-2">View on GitHub </a><!-- Place this tag where you want the button to render. --><div class="mt-2"><!-- Place this tag where you want the button to render. --> <a class="github-button" href="https://github.com/themesberg/pixel-bootstrap-ui-kit" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/pixel-bootstrap-ui-kit on GitHub">Star</a></div></div></div><div class="col-12 col-lg-4"><div class="github-big-icon"><i class="fab fa-github"></i></div></div></div><div class="row mt-6"><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card border-light p-4"><!-- Header --><div class="card-header bg-white pb-0"><span class="d-block"><span class="h2 text-primary font-weight-bold"><span class="align-top font-medium"></span>Free Version</span></span></div><!-- End Header --><!-- Content --><div class="card-body"><ul class="list-group list-group-flush price-list"><li class="list-group-item bg-white pl-0"><strong>80</strong> Components</li><li class="list-group-item bg-white pl-0"><strong>4</strong> Example Pages</li><li class="list-group-item bg-white pl-0"><span class="icon-danger"><i class="fas fa-times-circle"></i></span> Uncoventional cards</li><li class="list-group-item bg-white pl-0"><span class="icon-danger"><i class="fas fa-times-circle"></i></span> Timelines</li><li class="list-group-item bg-white pl-0"><span class="icon-danger"><i class="fas fa-times-circle"></i></span> E-commerce</li><li class="list-group-item bg-white pl-0"><span class="icon-danger"><i class="fas fa-times-circle"></i></span> Charts</li><li class="list-group-item bg-white pl-0 pb-0"><span class="icon-danger"><i class="fas fa-times-circle"></i></span> Premium Support</li></ul></div><!-- End Content --></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0 mt-lg-n5"><div class="card border-light p-4"><!-- Header --><div class="card-header bg-white pb-0"><span class="d-block"><span class="h2 text-primary font-weight-bold"><span class="align-top font-medium"></span>Pro Version</span></span></div><!-- End Header --><!-- Content --><div class="card-body"><ul class="list-group list-group-flush price-list mb-5"><li class="list-group-item bg-white pl-0"><strong>1000+</strong> Components</li><li class="list-group-item bg-white pl-0"><strong>17</strong> Example Pages</li><li class="list-group-item bg-white pl-0"><span class="icon-success"><i class="fas fa-check-circle"></i></span> Uncoventional cards</li><li class="list-group-item bg-white pl-0"><span class="icon-success"><i class="fas fa-check-circle"></i></span> Timelines</li><li class="list-group-item bg-white pl-0"><span class="icon-success"><i class="fas fa-check-circle"></i></span> E-commerce</li><li class="list-group-item bg-white pl-0"><span class="icon-success"><i class="fas fa-check-circle"></i></span> Charts</li><li class="list-group-item bg-white border-0 pl-0 pb-0"><span class="icon-success"><i class="fas fa-check-circle"></i></span> Premium Support</li></ul><a href="https://demo.themesberg.com/pixel-pro/" target="_blank" class="btn btn-block btn-tertiary mr-4 animate-up-2">Live demo <i class="fas fa-external-link-alt ml-2"></i></a></div><!-- End Content --></div></div></div></div></section></main><footer class="footer pt-7 pb-6 bg-primary text-white"><div class="container"><div class="row"><div class="col-md-4"><p><strong>Pixel</strong> is a large User Interface Kit that will help you prototype and design beautiful, creative and modern websites.</p><ul class="social-buttons mb-5 mb-lg-0"><li><a href="https://twitter.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Follow us on Twitter"><i class="fab fa-twitter"></i></a></li><li><a href="https://www.facebook.com/Themesberg-214738555737136/" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Like us on Facebook"><i class="fab fa-facebook"></i></a></li><li><a href="https://github.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Star us on Github"><i class="fab fa-github"></i></a></li><li><a href="https://dribbble.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Like us on Dribbble"><i class="fab fa-dribbble"></i></a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><h5>Themesberg</h5><ul class="links-vertical"><li><a target="_blank" href="https://themesberg.com/blog">Blog</a></li><li><a target="_blank" href="https://themesberg.com/products">Products</a></li><li><a target="_blank" href="https://themesberg.com/about">About Us</a></li><li><a target="_blank" href="https://themesberg.com/contact">Contact Us</a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><h5>Other</h5><ul class="links-vertical"><li><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">Docs <span class="badge badge-sm badge-secondary ml-2">v3.0</span></a></li><li><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog" target="_blank">Changelog</a></li><li><a target="_blank" href="https://themesberg.com/licensing">License</a></li><li><a target="_blank" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues">Support</a></li></ul></div><div class="col-12 col-md-4 mb-5 mb-lg-0"><h5>Subscribe</h5><p class="text-muted">Join our mailing list. We write rarely, but only the best content.</p><form action="#"><div class="form-row mb-2"><div class="col-12"><input type="email" class="form-control mb-2" placeholder="Email Address" name="email" required=""></div><div class="col-12"><button type="submit" class="btn btn-tertiary shadow-soft btn-block" data-loading-text="Sending"><span>Subscribe</span></button></div></div></form><small class="text-muted">We’ll never share your details. See our <a class="text-white" href="#">Privacy Policy</a></small></div></div><hr class="my-5"><div class="row"><div class="col mb-md-0"><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center"><img src="./assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo"></a><div class="d-flex text-center justify-content-center align-items-center"><p class="font-weight-normal font-small mb-0">Copyright © <a href="https://themesberg.com" target="_blank">Themesberg</a> <span class="current-year">2020</span>. All rights reserved.</p></div></div></div></div></footer><!-- Core --><script src="./node_modules/jquery/dist/jquery.min.js"></script><script src="./node_modules/popper.js/dist/umd/popper.min.js"></script><script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script><script src="./node_modules/headroom.js/dist/headroom.min.js"></script><!-- Vendor JS --><script src="./node_modules/onscreen/dist/on-screen.umd.min.js"></script><script src="./node_modules/nouislider/distribute/nouislider.min.js"></script><script src="./node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js"></script><script src="./node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script><script src="./node_modules/waypoints/lib/jquery.waypoints.min.js"></script><script src="./node_modules/jarallax/dist/jarallax.min.js"></script><script src="./node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script><script src="./node_modules/vivus/dist/vivus.min.js"></script><script src="./node_modules/vivus/src/pathformer.js"></script><!-- Place this tag in your head or just before your close body tag. --><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><!-- pixel JS --><script src="./assets/js/pixel.js"></script></body></html>