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-->
18<!DOCTYPE html>
19<html lang="en">
20<head>
21<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
22<!-- Primary Meta Tags -->
23<title>
24Pixel Lite - All components</title>
25<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
26<meta name="title" content="Pixel Lite - All components">
27<meta name="author" content="Themesberg">
28<meta name="description" content="Open source and accessibility first Bootstrap UI Kit featuring over 80 premium components and 4 example pages.">
29<meta name="keywords" content="bootstrap, bootstrap ui kit, accessiblity, accessibility first, open source, open source bootstrap ui kit">
30<link rel="canonical" href="https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit">
31<!-- Open Graph / Facebook -->
32<meta property="og:type" content="website">
33<meta property="og:url" content="https://demo.themesberg.com/pixel-lite">
34<meta property="og:title" content="Pixel Lite - All components">
35<meta property="og:description" content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages.">
36<meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg">
37<!-- Twitter -->
38<meta property="twitter:card" content="summary_large_image">
39<meta property="twitter:url" content="https://demo.themesberg.com/pixel-lite">
40<meta property="twitter:title" content="Pixel Lite - All components">
41<meta property="twitter:description" content="Open source and accessibility oriented Bootstrap UI Kit featuring over 80 premium components and 4 example pages.">
42<meta property="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-lite/pixel-lite-preview.jpg">
43<!-- Favicon -->
44<link rel="apple-touch-icon" sizes="120x120" href="../../assets/img/favicon/apple-touch-icon.png">
45<link rel="icon" type="image/png" sizes="32x32" href="../../assets/img/favicon/favicon-32x32.png">
46<link rel="icon" type="image/png" sizes="16x16" href="../../assets/img/favicon/favicon-16x16.png">
47<link rel="manifest" href="../../assets/img/favicon/site.webmanifest">
48<link rel="mask-icon" href="../../assets/img/favicon/safari-pinned-tab.svg" color="#ffffff">
49<meta name="msapplication-TileColor" content="#ffffff">
50<meta name="theme-color" content="#ffffff">
51<!-- Fontawesome -->
52<link type="text/css" href="../../node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
53<!-- Pixel CSS -->
54<link type="text/css" href="../../css/pixel.css" rel="stylesheet">
55<!-- Fullstory tracking -->
56<script>
57window['_fs_debug'] = false;
58 window['_fs_host'] = 'fullstory.com';
59 window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
60 window['_fs_org'] = 'S6PW8';
61 window['_fs_namespace'] = 'FS';
62 (function(m,n,e,t,l,o,g,y){
63 if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
64 g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
65 o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
66 y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
67 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)};
68 g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
69 g.log = function(a,b){g("log",[a,b])};
70 g.consent=function(a){g("consent",!arguments.length||a)};
71 g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
72 g.clearUserCookie=function(){};
73 g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
74 if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
75 })(window,document,window['_fs_namespace'],'script','user');</script>
76<!-- Global site tag (gtag.js) - Google Analytics -->
77<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-1">
78</script>
79<script>
80window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-1');</script>
81</head>
82<body>
83<header class="header-global">
84<nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark">
85<div class="container position-relative">
86<a class="navbar-brand mr-lg-5" href="../../index.html">
87<img class="navbar-brand-dark" src="../../assets/img/brand/light.svg" alt="Logo light">
88 <img class="navbar-brand-light" src="../../assets/img/brand/dark.svg" alt="Logo dark">
89</a>
90<div class="navbar-collapse collapse" id="navbar_global">
91<div class="navbar-collapse-header">
92<div class="row">
93<div class="col-6 collapse-brand">
94<a href="../../index.html">
95<img src="../../assets/img/brand/dark.svg" alt="menuimage">
96</a>
97</div>
98<div class="col-6 collapse-close">
99<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">
100</a>
101</div>
102</div>
103</div>
104<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
105<li class="nav-item dropdown">
106<a href="#" class="nav-link" data-toggle="dropdown">
107<span class="nav-link-inner-text">
108Pages</span>
109 <i class="fas fa-angle-down nav-link-arrow ml-2">
110</i>
111</a>
112<ul class="dropdown-menu">
113<li>
114<a class="dropdown-item" href="../../html/pages/about-company.html">
115About</a>
116</li>
117<li>
118<a class="dropdown-item" href="../../html/pages/contact.html">
119Contact</a>
120</li>
121<li>
122<a class="dropdown-item" href="../../html/pages/pricing.html">
123Pricing</a>
124</li>
125<li>
126<a class="dropdown-item" href="../../html/pages/services.html">
127Services</a>
128</li>
129</ul>
130</li>
131<li class="nav-item dropdown mega-dropdown">
132<a href="#" class="nav-link" data-toggle="dropdown">
133<span class="nav-link-inner-text">
134Components</span>
135 <i class="fas fa-angle-down nav-link-arrow ml-2">
136</i>
137</a>
138<div class="dropdown-menu">
139<div class="row">
140<div class="col-lg-6 inside-bg d-none d-lg-block">
141<div class="justify-content-center bg-tertiary text-white">
142<div class="px-6 pb-4 pt-5">
143<img src="../../assets/img/megamenu_image.png" alt="image">
144</div>
145<div class="z-2 pb-4 text-center">
146<a href="../../html/components/all.html" class="btn btn-primary btn-icon animate-up-2 mb-2 mb-sm-0 mr-3">
147<span class="mr-1">
148<i class="fas fa-th-large">
149</i>
150</span>
151 All components </a>
152<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">
153<span class="mr-1">
154<i class="fas fa-book">
155</i>
156</span>
157 Docs v3.0</a>
158</div>
159</div>
160</div>
161<div class="col pl-0">
162<ul class="list-style-none">
163<li>
164<a class="dropdown-item" href="../../html/components/accordions.html">
165Accordions</a>
166</li>
167<li>
168<a class="dropdown-item" href="../../html/components/alerts.html">
169Alerts</a>
170</li>
171<li>
172<a class="dropdown-item" href="../../html/components/badges.html">
173Badges</a>
174</li>
175<li>
176<a class="dropdown-item" href="../../html/components/cards.html">
177Cards</a>
178</li>
179<li>
180<a class="dropdown-item" href="../../html/components/bootstrap-carousels.html">
181Bootstrap Carousels</a>
182</li>
183<li>
184<a class="dropdown-item" href="../../html/components/breadcrumbs.html">
185Breadcrumbs</a>
186</li>
187<li>
188<a class="dropdown-item" href="../../html/components/buttons.html">
189Buttons</a>
190</li>
191<li>
192<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/jquery-counters/" target="_blank">
193Counters <span class="badge badge-tertiary text-uppercase ml-3">
194Pro</span>
195</a>
196</li>
197<li>
198<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">
199Dropdowns <span class="badge badge-tertiary text-uppercase ml-3">
200Pro</span>
201</a>
202</li>
203</ul>
204</div>
205<div class="col pl-0">
206<ul class="list-style-none">
207<li>
208<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/e-commerce/" target="_blank">
209E-commerce <span class="badge badge-tertiary text-uppercase ml-3">
210Pro</span>
211</a>
212</li>
213<li>
214<a class="dropdown-item" href="../../html/components/forms.html">
215Forms</a>
216</li>
217<li>
218<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/icon-boxes/" target="_blank">
219Icon Boxes <span class="badge badge-tertiary text-uppercase ml-3">
220Pro</span>
221</a>
222</li>
223<li>
224<a class="dropdown-item" href="../../html/components/modals.html">
225Modals</a>
226</li>
227<li>
228<a class="dropdown-item" href="../../html/components/navs.html">
229Navs</a>
230</li>
231<li>
232<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/owl-carousel/" target="_blank">
233Owl Carousels <span class="badge badge-tertiary text-uppercase ml-3">
234Pro</span>
235</a>
236</li>
237<li>
238<a class="dropdown-item" href="../../html/components/pagination.html">
239Pagination</a>
240</li>
241<li>
242<a class="dropdown-item" href="../../html/components/popovers.html">
243Popovers</a>
244</li>
245<li>
246<a class="dropdown-item" href="../../html/components/progress-bars.html">
247Progress Bars</a>
248</li>
249</ul>
250</div>
251<div class="col pl-0">
252<ul class="list-style-none">
253<li>
254<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">
255Steps <span class="badge badge-tertiary text-uppercase ml-3">
256Pro</span>
257</a>
258</li>
259<li>
260<a class="dropdown-item" href="../../html/components/tables.html">
261Tables</a>
262</li>
263<li>
264<a class="dropdown-item" href="../../html/components/tabs.html">
265Tabs</a>
266</li>
267<li>
268<a class="dropdown-item" href="../../html/components/toasts.html">
269Toasts</a>
270</li>
271<li>
272<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/components/timelines/" target="_blank">
273Timelines <span class="badge badge-tertiary text-uppercase ml-3">
274Pro</span>
275</a>
276</li>
277<li>
278<a class="dropdown-item" href="../../html/components/tooltips.html">
279Tooltips</a>
280</li>
281<li>
282<a class="dropdown-item" href="../../html/components/typography.html">
283Typography</a>
284</li>
285<li>
286<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/pixel-bootstrap/plugins/chart-js/" target="_blank">
287Charts <span class="badge badge-tertiary text-uppercase ml-3">
288Pro</span>
289</a>
290</li>
291<li>
292<a class="dropdown-item d-flex align-items-center justify-content-between" href="https://demo.themesberg.com/pixel-pro/html/components/widgets.html">
293Widgets <span class="badge badge-tertiary text-uppercase ml-3">
294Pro</span>
295</a>
296</li>
297</ul>
298</div>
299</div>
300</div>
301</li>
302<li class="nav-item dropdown">
303<a href="#" class="nav-link" data-toggle="dropdown">
304<span class="nav-link-inner-text">
305Support</span>
306 <i class="fas fa-angle-down nav-link-arrow ml-2">
307</i>
308</a>
309<div class="dropdown-menu dropdown-menu-lg">
310<div class="col-auto px-0" data-dropdown-content>
311<div class="list-group list-group-flush">
312<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">
313<span class="icon icon-sm icon-secondary">
314<i class="fas fa-file-alt">
315</i>
316</span>
317<div class="ml-4">
318<span class="text-dark d-block">
319Documentation<span class="badge badge-sm badge-secondary ml-2">
320v3.0</span>
321</span>
322 <span class="small">
323Examples and guides</span>
324</div>
325</a>
326<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">
327<span class="icon icon-sm icon-primary">
328<i class="fas fa-microphone-alt">
329</i>
330</span>
331<div class="ml-4">
332<span class="text-dark d-block">
333Support</span>
334 <span class="small">
335Found an issue? Let us know!</span>
336</div>
337</a>
338</div>
339</div>
340</div>
341</li>
342</ul>
343</div>
344<div class="d-flex align-items-center">
345<span class="d-none d-md-inline">
346<a href="https://demo.themesberg.com/pixel-pro/" target="_blank" class="btn btn-tertiary animate-up-2">
347Upgrade to Pro</a>
348</span>
349 <a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank" class="btn btn-outline-soft ml-md-3 animate-up-2">
350<i class="fas fa-book mr-2">
351</i>
352 Docs v3.0</a>
353 <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">
354<span class="navbar-toggler-icon">
355</span>
356</button>
357</div>
358</div>
359</nav>
360</header>
361<main>
362<div class="preloader bg-dark flex-column justify-content-center align-items-center">
363<svg id="loader-logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 64 78.4">
364<path fill="#fff" d="M10,0h1.2V11.2H0V10A10,10,0,0,1,10,0Z"/>
365<rect fill="none" stroke="#fff" stroke-width="11.2" x="40" y="17.6" width="0" height="25.6"/>
366<rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="23" y="35.2" width="0" height="25.6"/>
367<path fill="#fff" d="M52.8,35.2H64V53.8a7,7,0,0,1-7,7H52.8V35.2Z"/>
368<rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="52.8" width="0" height="25.6"/>
369<path fill="#fff" d="M52.8,0H57a7,7,0,0,1,7,7h0v4.2H52.8V0Z"/>
370<rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="57.8" y="17.6" width="0" height="11.2"/>
371<rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="35.2" width="0" height="11.2"/>
372<rect fill="none" stroke="#fff" stroke-width="11.2" x="40.2" y="49.6" width="0" height="11.2"/>
373<path fill="#fff" d="M17.6,67.2H28.8v1.2a10,10,0,0,1-10,10H17.6V67.2Z"/>
374<rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="28.8" x="31.6" width="0" height="11.2"/>
375<rect fill="none" stroke="#fff" x="14" stroke-width="28.8" y="17.6" width="0" height="11.2"/>
376</svg>
377</div>
378<!-- Hero -->
379<section class="section section-head bg-primary text-white overflow-hidden z-2">
380<div class="container z-2">
381<div class="row justify-content-center text-center pt-6 mb-2">
382<div class="col-lg-8 col-xl-8">
383<h2 class="display-2 font-weight-light mb-3">
384Pixel <span class="font-weight-bolder">
385UI KIT</span>
386<span class="pixel-pro-badge-md font-weight-bolder text-primary">
387LITE</span>
388</h2>
389<p class="lead mb-5">
390Over 1000 premium Bootstrap components</p>
391<div class="d-flex flex-column flex-wrap flex-md-row justify-content-md-center mb-5">
392<div class="d-flex align-items-center">
393<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">
394<i class="fas fa-cloud-download-alt mr-2">
395</i>
396 Download</a>
397<div class="mt-1">
398<!-- Place this tag where you want the button to render. -->
399 <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">
400Star</a>
401</div>
402</div>
403</div>
404<a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center flex-column">
405<img src="../../assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo">
406 <span class="text-muted font-small">
407A Themesberg production</span>
408</a>
409</div>
410</div>
411</div>
412</section>
413<!--End of Title section-->
414<div class="section section-md">
415<div class="container">
416<div class="row justify-content-center mt-4">
417<div class="col-12 col-lg-8">
418<!--Accordion-->
419<div class="accordion" id="accordionExample1">
420<div class="card card-sm card-body border-light mb-0">
421<a href="#panel-1" data-target="#panel-1" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
422<span class="h6 mb-0 font-weight-bold">
423Our Company</span>
424 <span class="icon">
425<i class="fas fa-plus">
426</i>
427</span>
428</a>
429<div class="collapse" id="panel-1">
430<div class="pt-3">
431<p class="mb-0">
432At 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>
433</div>
434</div>
435</div>
436<div class="card card-sm card-body border-light mb-0">
437<a href="#panel-2" data-target="#panel-2" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
438<span class="h6 mb-0 font-weight-bold">
439Pixel Components</span>
440 <span class="icon">
441<i class="fas fa-plus">
442</i>
443</span>
444</a>
445<div class="collapse" id="panel-2">
446<div class="pt-3">
447<p class="mb-0">
448At 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>
449</div>
450</div>
451</div>
452<div class="card card-sm card-body border-light">
453<a href="#panel-3" data-target="#panel-3" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
454<span class="h6 mb-0 font-weight-bold">
455Licenses</span>
456 <span class="icon">
457<i class="fas fa-plus">
458</i>
459</span>
460</a>
461<div class="collapse" id="panel-3">
462<div class="pt-3">
463<p class="mb-0">
464At 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>
465</div>
466</div>
467</div>
468</div>
469<!--End of Accordion-->
470</div>
471</div>
472</div>
473</div>
474<!-- Section -->
475<div class="section section-md">
476<div class="container">
477<div class="row">
478<div class="col-lg-12">
479<div class="alert alert-primary" role="alert">
480<span class="alert-inner--text">
481This is a primary alert with <a href="#" class="alert-link">
482an example link</a>
483. Give it a click if you like.</span>
484</div>
485<div class="alert alert-secondary" role="alert">
486<span class="alert-inner--text">
487This is a secondary alert with <a href="#" class="alert-link">
488an example link</a>
489. Give it a click if you like.</span>
490</div>
491<div class="alert alert-success" role="alert">
492<span class="alert-inner--text">
493This is a success alert with <a href="#" class="alert-link">
494an example link</a>
495. Give it a click if you like.</span>
496</div>
497<div class="alert alert-info" role="alert">
498<span class="alert-inner--text">
499This is a info alert with <a href="#" class="alert-link">
500an example link</a>
501. Give it a click if you like.</span>
502</div>
503<div class="alert alert-warning" role="alert">
504<span class="alert-inner--text">
505This is a warning alert with <a href="#" class="alert-link text-dark">
506an example link</a>
507. Give it a click if you like.</span>
508</div>
509<div class="alert alert-danger" role="alert">
510<span class="alert-inner--text">
511This is a danger alert with <a href="#" class="alert-link">
512an example link</a>
513. Give it a click if you like.</span>
514</div>
515</div>
516</div>
517</div>
518</div>
519<!-- End of Section -->
520<!-- Section -->
521<div class="section section-md">
522<div class="container">
523<div class="row">
524<div class="col-lg-6">
525<div class="mb-4">
526<h6 class="font-weight-bold">
527Square Badges</h6>
528</div>
529<span class="badge badge-primary text-uppercase">
530Primary</span>
531 <span class="badge badge-secondary text-uppercase">
532Secondary</span>
533 <span class="badge badge-tertiary text-uppercase">
534Tertiary</span>
535 <span class="badge badge-gray text-uppercase">
536Gray</span>
537 <span class="badge badge-success text-uppercase">
538Success</span>
539 <span class="badge badge-danger text-uppercase">
540Danger</span>
541 <span class="badge badge-warning text-uppercase">
542Warning</span>
543 <span class="badge badge-info text-uppercase">
544Info</span>
545</div>
546<div class="col-lg-6">
547<div class="mb-4">
548<h6 class="font-weight-bold">
549Round Badges</h6>
550</div>
551<span class="badge badge-pill badge-primary text-uppercase">
552Primary</span>
553 <span class="badge badge-pill badge-secondary text-uppercase">
554Secondary</span>
555 <span class="badge badge-pill badge-tertiary text-uppercase">
556Tertiary</span>
557 <span class="badge badge-pill badge-gray text-uppercase">
558Gray</span>
559 <span class="badge badge-pill badge-success text-uppercase">
560Success</span>
561 <span class="badge badge-pill badge-danger text-uppercase">
562Danger</span>
563 <span class="badge badge-pill badge-warning text-uppercase">
564Warning</span>
565 <span class="badge badge-pill badge-info text-uppercase">
566Info</span>
567</div>
568</div>
569</div>
570</div>
571<!-- End of Section -->
572<!--End of Title section-->
573<div class="section section-md">
574<div class="container">
575<div class="row mb-5">
576<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
577<div class="card border-light">
578<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
579<div class="card-body">
580<span class="h6 icon-tertiary small">
581<i class="fas fa-medal mr-2">
582</i>
583Awards</span>
584<h5 class="card-title mt-3">
585We partnered up with Ildiesign</h5>
586<p class="card-text">
587Some quick example text to build on the card title and make up the bulk of the card's content.</p>
588<a href="#" class="btn btn-primary btn-sm">
589Read More</a>
590</div>
591</div>
592</div>
593<div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-7 mb-lg-0">
594<div class="card overflow-hidden">
595<div class="position-relative">
596<img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top" alt="image">
597</div>
598<div class="card-body position-relative mt-n6 mx-2 bg-white text-center rounded border border-light">
599<h5 class="card-title">
600Neil D. Sims</h5>
601<span class="text-gray">
602<i class="fas fa-map-marker-alt mr-2">
603</i>
604New York, USA</span>
605<p class="mt-3">
606Neil drives the technical strategy of the platform and brand.</p>
607<div class="btn-group">
608<button class="btn btn-secondary btn-icon">
609<span class="mr-1">
610<i class="far fa-user">
611</i>
612</span>
613 Follow</button>
614
<button class="btn btn-primary">
615<i class="far fa-envelope">
616</i>
617</button>
618</div>
619</div>
620</div>
621</div>
622<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
623<div class="card border-light text-center">
624<!-- Header -->
625<div class="card-header bg-white p-3">
626<h3 class="text-primary mb-4">
627Basic</h3>
628<span class="d-block">
629<span class="display-1 text-dark font-weight-bold">
630<span class="align-top font-medium">
631$</span>
63219 </span>
633<span class="d-block text-gray font-small">
634/ month</span>
635</span>
636</div>
637<!-- End Header -->
638<!-- Content -->
639<div class="card-body">
640<ul class="list-unstyled mb-4">
641<li class="list-item pb-3">
642<strong>
6431</strong>
644 free domain</li>
645<li class="list-item pb-3">
646Storage space: <strong>
6475GB</strong>
648</li>
649<li class="list-item pb-3">
650<strong>
651100k</strong>
652 monthly visitors</li>
653<li class="list-item pb-3">
654One-click staging site</li>
655<li class="list-item pb-3">
656Search engine wizard</li>
657<li class="list-item pb-3">
658Community support</li>
659</ul>
660<button type="button" class="btn btn-primary btn-block animate-up-1">
661Start Starter</button>
662</div>
663<!-- End Content -->
664</div>
665</div>
666<div class="col-12 mt-5">
667<div class="card border-light px-4 py-5 text-center">
668<div class="card-header bg-white pb-0">
669<h2 class="h1 mb-3">
670Get the most out of your network.</h2>
671</div>
672<div class="card-body pt-2 px-0 px-lg-7">
673<p class="mb-5 lead">
674Contact management designed for teams and individuals</p>
675<div class="row justify-content-center">
676<div class="col-12 col-md-8">
677<div class="form-group">
678<div class="d-flex flex-row justify-content-center">
679<div class="input-group">
680<input class="form-control form-control-xl border-light" placeholder="Your email address" type="email">
681<div class="input-group-prepend">
682<button type="submit" class="btn btn-primary rounded-right">
683Subscribe</button>
684</div>
685</div>
686</div>
687</div>
688</div>
689</div>
690</div>
691</div>
692</div>
693</div>
694</div>
695</div>
696<!-- Section -->
697<section class="section section-md">
698<div class="container">
699<div class="row">
700<div class="col-md-10 mx-auto">
701<!-- Carousel -->
702<div id="Carousel2" class="carousel slide" data-ride="carousel">
703<div class="carousel-inner">
704<div class="carousel-item active">
705<img class="d-block w-100 rounded" src="../../assets/img/carousel/image-1.jpg" alt="First slide">
706</div>
707<div class="carousel-item">
708<img class="d-block w-100 rounded" src="../../assets/img/carousel/image-2.jpg" alt="Second slide">
709</div>
710<div class="carousel-item">
711<img class="d-block w-100 rounded" src="../../assets/img/carousel/image-3.jpg" alt="Third slide">
712</div>
713</div>
714<a class="carousel-control-prev" href="#Carousel2" role="button" data-slide="prev">
715<span class="carousel-control-prev-icon" aria-hidden="true">
716</span>
717 <span class="sr-only">
718Previous</span>
719 </a>
720<a class="carousel-control-next" href="#Carousel2" role="button" data-slide="next">
721<span class="carousel-control-next-icon" aria-hidden="true">
722</span>
723 <span class="sr-only">
724Next</span>
725</a>
726</div>
727<!-- End of Carousel -->
728</div>
729</div>
730</div>
731</section>
732<!-- End of Section -->
733<!-- Section -->
734<section class="section section-md">
735<div class="container">
736<div class="row">
737<div class="col-12">
738<div class="mb-6">
739<!--Breadcrumb-->
740<nav aria-label="breadcrumb">
741<ol class="breadcrumb breadcrumb-text-light breadcrumb-primary text-white">
742<li class="breadcrumb-item">
743<a href="#">
744Home</a>
745</li>
746<li class="breadcrumb-item">
747<a href="#">
748Library</a>
749</li>
750<li class="breadcrumb-item active" aria-current="page">
751Data</li>
752</ol>
753</nav>
754<!--End of Breadcrumb-->
755<!--Breadcrumb-->
756<nav aria-label="breadcrumb">
757<ol class="breadcrumb breadcrumb-text-light breadcrumb-secondary text-white">
758<li class="breadcrumb-item">
759<a href="#">
760Home</a>
761</li>
762<li class="breadcrumb-item">
763<a href="#">
764Library</a>
765</li>
766<li class="breadcrumb-item active" aria-current="page">
767Data</li>
768</ol>
769</nav>
770<!--End of Breadcrumb-->
771<!--Breadcrumb-->
772<nav aria-label="breadcrumb">
773<ol class="breadcrumb breadcrumb-text-light breadcrumb-tertiary text-white">
774<li class="breadcrumb-item">
775<a href="#">
776Home</a>
777</li>
778<li class="breadcrumb-item">
779<a href="#">
780Library</a>
781</li>
782<li class="breadcrumb-item active" aria-current="page">
783Data</li>
784</ol>
785</nav>
786<!--End of Breadcrumb-->
787<!--Breadcrumb-->
788<nav aria-label="breadcrumb">
789<ol class="breadcrumb breadcrumb-text-light breadcrumb-info text-white">
790<li class="breadcrumb-item">
791<a href="#">
792Home</a>
793</li>
794<li class="breadcrumb-item">
795<a href="#">
796Library</a>
797</li>
798<li class="breadcrumb-item active" aria-current="page">
799Data</li>
800</ol>
801</nav>
802<!--End of Breadcrumb-->
803</div>
804</div>
805</div>
806</div>
807</section>
808<!-- End of Section -->
809<!--End of Title section-->
810<div class="section section-md components-section">
811<div class="container">
812<div class="row">
813<div class="col-lg-12">
814<div class="mb-3">
815<h5>
816Main Buttons</h5>
817</div>
818<!--Buttons-->
819 <button class="btn btn-primary" type="button">
820Button</button>
821 <button class="btn btn-primary" type="button">
822<span class="mr-1">
823<i class="fas fa-book-open">
824</i>
825</span>
826 Icon Left</button>
827 <button class="btn btn-primary" type="button">
828Icon Right <span class="ml-1">
829<i class="fas fa-book-open">
830</i>
831</span>
832</button>
833
<button class="btn btn-icon-only btn-primary" type="button">
834<i class="far fa-heart">
835</i>
836</button>
837<!--End of Buttons-->
838<!--End of Buttons-->
839<div class="mb-3 mt-5">
840<h5>
841Outline Buttons</h5>
842</div>
843<!--Buttons-->
844 <button class="btn btn-outline-primary" type="button">
845Outline-primary</button>
846 <button class="btn btn-outline-primary" type="button">
847<span class="mr-1">
848<i class="far fa-save">
849</i>
850</span>
851 Icon Left</button>
852 <button class="btn btn-outline-primary" type="button">
853Icon Right <span class="ml-1">
854<i class="far fa-save">
855</i>
856</span>
857</button>
858
<button class="btn btn-icon-only btn-outline-primary" type="button">
859<i class="far fa-thumbs-up">
860</i>
861</button>
862<!--End of Buttons-->
863<div class="mb-3 mt-5">
864<h5>
865Sizes</h5>
866</div>
867<!--Buttons-->
868 <button class="btn btn-sm btn-primary" type="button">
869Small</button>
870 <button class="btn btn-primary" type="button">
871Regular</button>
872 <button class="btn btn-lg btn-primary" type="button">
873Large Button</button>
874<!--End of Buttons-->
875<!-- Button colors -->
876<div class="mb-3 mt-5">
877<h5>
878Choose your color</h5>
879</div>
880<div class="mb-3 mt-5">
881<small class="text-uppercase font-weight-bold">
882Main</small>
883</div>
884<!--Buttons-->
885 <button class="btn btn-primary" type="button">
886Primary</button>
887 <button class="btn btn-secondary" type="button">
888Secondary</button>
889 <button class="btn btn-tertiary" type="button">
890Tertiary</button>
891 <button class="btn btn-info" type="button">
892Info</button>
893 <button class="btn btn-success" type="button">
894Success</button>
895 <button class="btn btn-warning" type="button">
896Warning</button>
897 <button class="btn btn-danger" type="button">
898Danger</button>
899 <button class="btn btn-dark" type="button">
900Dark</button>
901 <button class="btn btn-gray" type="button">
902Gray</button>
903 <button class="btn btn-light" type="button">
904Light</button>
905 <button class="btn btn-white" type="button">
906White</button>
907<!--End Of Buttons-->
908<div class="mb-3 mt-5">
909<small class="text-uppercase font-weight-bold">
910Outline</small>
911</div>
912<!--Buttons-->
913 <button class="btn btn-outline-primary" type="button">
914Primary</button>
915 <button class="btn btn-outline-secondary" type="button">
916Secondary</button>
917 <button class="btn btn-outline-tertiary" type="button">
918Tertiary</button>
919 <button class="btn btn-outline-info" type="button">
920Info</button>
921 <button class="btn btn-outline-success" type="button">
922Success</button>
923 <button class="btn btn-outline-warning" type="button">
924Warning</button>
925 <button class="btn btn-outline-danger" type="button">
926Danger</button>
927 <button class="btn btn-outline-dark" type="button">
928Dark</button>
929 <button class="btn btn-outline-gray" type="button">
930Gray</button>
931</div>
932<div class="row">
933<div class="col-12 col-lg-4">
934<!-- Button Social -->
935<div class="mb-4 mt-5">
936<h6>
937Social Buttons</h6>
938</div>
939<button class="btn btn-twitter" type="button">
940<span class="mr-1">
941<i class="fab fa-twitter">
942</i>
943</span>
944 Login with Twitter</button>
945<br>
946<button class="btn btn-facebook" type="button">
947<span class="mr-1">
948<i class="fab fa-facebook-f">
949</i>
950</span>
951 Login with Facebook</button>
952<br>
953<button class="btn btn-instagram" type="button">
954<span class="mr-1">
955<i class="fab fa-instagram">
956</i>
957</span>
958 Follow on Instagram</button>
959<br>
960<button class="btn btn-pinterest" type="button">
961<span class="mr-1">
962<i class="fab fa-pinterest-p">
963</i>
964</span>
965 Share on Pinterest</button>
966</div>
967<div class="col-12 col-lg-4">
968<!-- Button Social -->
969<div class="mb-4 mt-5">
970<h6>
971Round Social Buttons</h6>
972</div>
973<button class="btn btn-pill btn-twitter" type="button">
974<span class="mr-1">
975<i class="fab fa-twitter">
976</i>
977</span>
978 Login with Twitter</button>
979<br>
980<button class="btn btn-pill btn-facebook" type="button">
981<span class="mr-1">
982<i class="fab fa-facebook-f">
983</i>
984</span>
985 Login with Facebook</button>
986<br>
987<button class="btn btn-pill btn-instagram" type="button">
988<span class="mr-1">
989<i class="fab fa-instagram">
990</i>
991</span>
992 Follow on Instagram</button>
993<br>
994<button class="btn btn-pill btn-pinterest" type="button">
995<span class="mr-1">
996<i class="fab fa-pinterest-p">
997</i>
998</span>
999 Share on Pinterest</button>
1000</div>
1001<div class="col-12 col-lg-1">
1002<!-- Square -->
1003<div class="mb-4 mt-5">
1004<h6>
1005Square</h6>
1006</div>
1007<button class="btn btn-icon-only btn-twitter" type="button">
1008<i class="fab fa-twitter">
1009</i>
1010</button>
1011
<button class="btn btn-icon-only btn-facebook" type="button">
1012<i class="fab fa-facebook-f">
1013</i>
1014</button>
1015
<button class="btn btn-icon-only btn-instagram" type="button">
1016<i class="fab fa-instagram">
1017</i>
1018</button>
1019
<button class="btn btn-icon-only btn-pinterest" type="button">
1020<i class="fab fa-pinterest-p">
1021</i>
1022</button>
1023</div>
1024<div class="col-12 col-lg-1">
1025<!-- Circle -->
1026<div class="mb-4 mt-5">
1027<h6>
1028Circle</h6>
1029</div>
1030<button class="btn btn-icon-only btn-pill btn-twitter" type="button">
1031<i class="fab fa-twitter">
1032</i>
1033</button>
1034
<button class="btn btn-icon-only btn-pill btn-facebook" type="button">
1035<i class="fab fa-facebook-f">
1036</i>
1037</button>
1038
<button class="btn btn-icon-only btn-pill btn-instagram" type="button">
1039<i class="fab fa-instagram">
1040</i>
1041</button>
1042
<button class="btn btn-icon-only btn-pill btn-pinterest" type="button">
1043<i class="fab fa-pinterest-p">
1044</i>
1045</button>
1046</div>
1047</div>
1048</div>
1049</div>
1050</div>
1051<!-- Section -->
1052<section class="section section-md pb-0">
1053<div class="container">
1054<!-- Title -->
1055<div class="row">
1056<div class="col-md-4">
1057<div class="mb-5">
1058<h5>
1059Default Forms</h5>
1060</div>
1061</div>
1062</div>
1063<!-- End of Title -->
1064<div class="row">
1065<div class="col-lg-4 col-sm-6">
1066<!-- Form -->
1067<div class="form-group">
1068<input type="text" placeholder="Default" class="form-control">
1069</div>
1070<!-- End of Form -->
1071<!-- Form -->
1072<div class="form-group">
1073<div class="input-group mb-4">
1074<div class="input-group-prepend">
1075<span class="input-group-text">
1076<i class="fas fa-search">
1077</i>
1078</span>
1079</div>
1080<input class="form-control" placeholder="Icon Left" type="text">
1081</div>
1082</div>
1083<!-- End of Form -->
1084<!-- Form -->
1085<div class="form-group">
1086<div class="input-group mb-4">
1087<input class="form-control" placeholder="Password" type="password">
1088<div class="input-group-append">
1089<span class="input-group-text">
1090<i class="fas fa-unlock-alt">
1091</i>
1092</span>
1093</div>
1094</div>
1095</div>
1096<!-- End of Form -->
1097<!-- Form -->
1098<div class="custom-file">
1099<input type="file" class="custom-file-input" id="customFile">
1100 <label class="custom-file-label" for="customFile">
1101Choose file</label>
1102</div>
1103<!-- End of Form -->
1104</div>
1105<div class="col-lg-4 col-sm-6">
1106<!-- Form -->
1107<div class="form-group mt-3 mt-sm-0">
1108<input type="text" placeholder="Disabled" class="form-control" disabled="disabled">
1109</div>
1110<!-- End of Form -->
1111<!-- Form -->
1112<div class="form-group">
1113<div class="input-group mb-4">
1114<input class="form-control" placeholder="Icon Right" type="text">
1115<div class="input-group-append">
1116<span class="input-group-text">
1117<i class="fas fa-search">
1118</i>
1119</span>
1120</div>
1121</div>
1122</div>
1123<!-- End of Form -->
1124<!-- Form -->
1125<div class="form-group">
1126<div class="input-group mb-4">
1127<div class="input-group-prepend">
1128<span class="input-group-text">
1129<i class="fas fa-unlock-alt">
1130</i>
1131</span>
1132</div>
1133<input class="form-control" placeholder="Password" type="password">
1134</div>
1135</div>
1136<!-- End of Form -->
1137<!-- Form -->
1138<div class="form-group">
1139<textarea class="form-control" placeholder="Enter your message..." id="exampleFormControlTextarea" rows="4">
1140</textarea>
1141</div>
1142<!-- End of Form -->
1143</div>
1144<div class="col-lg-4 col-sm-6">
1145<!-- Form -->
1146<div class="form-group has-success">
1147<input type="text" placeholder="Success Input" class="form-control is-valid">
1148</div>
1149<!-- End of Form -->
1150<!-- Form -->
1151<div class="form-group has-danger mb-4">
1152<input type="email" placeholder="Error Input" class="form-control is-invalid">
1153</div>
1154<!-- End of Form -->
1155<!-- Form -->
1156<div class="form-group">
1157<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
1158<option>
1159Select your country</option>
1160<option>
1161Italia</option>
1162<option>
1163USA</option>
1164<option>
1165England</option>
1166<option>
1167France</option>
1168</select>
1169</div>
1170<!-- End of Form -->
1171</div>
1172</div>
1173</div>
1174</section>
1175<!-- End of Section -->
1176<!-- Section -->
1177<div class="section section-md">
1178<div class="container">
1179<h5>
1180Datepicker</h5>
1181<div class="row mt-5 mb-5">
1182<div class="col-md-4">
1183<!-- Form -->
1184 <small class="d-block font-weight-normal mb-3">
1185Date of birth</small>
1186<div class="form-group">
1187<div class="input-group input-group-border">
1188<div class="input-group-prepend">
1189<span class="input-group-text">
1190<i class="far fa-calendar-alt">
1191</i>
1192</span>
1193</div>
1194<input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2018">
1195</div>
1196</div>
1197<!-- End of Form -->
1198</div>
1199<div class="col-md-8 mt-4 mt-md-0">
1200<!-- Form -->
1201 <small class="d-block font-weight-normal mb-3">
1202Employment Period</small>
1203<div class="input-daterange datepicker row align-items-center">
1204<div class="col">
1205<div class="form-group">
1206<div class="input-group input-group-border">
1207<div class="input-group-prepend">
1208<span class="input-group-text">
1209<i class="far fa-calendar-alt">
1210</i>
1211</span>
1212</div>
1213<input class="form-control" placeholder="Start date" type="text" value="06/18/2018">
1214</div>
1215</div>
1216</div>
1217<div class="col">
1218<div class="form-group">
1219<div class="input-group input-group-border">
1220<div class="input-group-prepend">
1221<span class="input-group-text">
1222<i class="far fa-calendar-alt">
1223</i>
1224</span>
1225</div>
1226<input class="form-control" placeholder="End date" type="text" value="06/22/2018">
1227</div>
1228</div>
1229</div>
1230</div>
1231<!-- End of Form -->
1232</div>
1233</div>
1234<h5>
1235Range Sliders</h5>
1236<div class="row mt-5 mb-5">
1237<div class="col-lg-6 col-sm-6">
1238<!-- Simple slider -->
1239<div class="input-slider-container">
1240<div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500">
1241</div>
1242<!-- Input slider values -->
1243<div class="row mt-3 d-none">
1244<div class="col-6">
1245<span class="range-slider-value" data-range-value-low="200">
1246</span>
1247</div>
1248</div>
1249</div>
1250<!-- End of Slider -->
1251</div>
1252<!-- Range slider -->
1253<div class="col-lg-6 col-sm-6">
1254<!-- Range slider container -->
1255<div id="input-slider-range" data-range-value-min="100" data-range-value-max="500">
1256</div>
1257<!-- Range slider values -->
1258<div class="row d-none">
1259<div class="col-6">
1260<span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low">
1261</span>
1262</div>
1263<div class="col-6 text-right">
1264<span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high">
1265</span>
1266</div>
1267</div>
1268<!-- End of range slider values -->
1269</div>
1270</div>
1271<div class="row mt-5">
1272<div class="col-lg-6 col-sm-6 my-5 my-md-0">
1273<!-- Range slider container -->
1274<div id="input-slider-range-2" data-range-value-min="100" data-range-value-max="500">
1275</div>
1276<!-- Range slider values -->
1277<div class="row d-none">
1278<div class="col-6">
1279<span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-2">
1280</span>
1281</div>
1282<div class="col-6 text-right">
1283<span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-2">
1284</span>
1285</div>
1286</div>
1287<!-- End of range slider values -->
1288</div>
1289<div class="col-3 offset-md-2 col-lg-2">
1290<!-- Range slider container -->
1291<div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500">
1292</div>
1293<!-- Range slider values -->
1294<div class="row d-none">
1295<div class="col-6">
1296<span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3">
1297</span>
1298</div>
1299<div class="col-6 text-right">
1300<span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3">
1301</span>
1302</div>
1303</div>
1304<!-- End of range slider values -->
1305</div>
1306<div class="col-3 col-lg-2">
1307<!-- Range slider container -->
1308<div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500">
1309</div>
1310<!-- Range slider values -->
1311<div class="row d-none">
1312<div class="col-6">
1313<span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4">
1314</span>
1315</div>
1316<div class="col-6 text-right">
1317<span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4">
1318</span>
1319</div>
1320</div>
1321<!-- End of range slider values -->
1322</div>
1323</div>
1324<h5 class="mt-5 mt-md-0">
1325Custom Forms</h5>
1326<div class="row">
1327<div class="col-lg-3 col-md-6">
1328<div class="mb-3">
1329<small class="font-weight-bold">
1330Checkboxes</small>
1331</div>
1332<!-- Checkbox -->
1333<div class="form-check mb-3">
1334<label class="form-check-label">
1335<input class="form-check-input" type="checkbox">
1336 <span class="form-check-sign">
1337</span>
1338 Unchecked</label>
1339</div>
1340<!-- End of Checkbox -->
1341<!-- Checkbox -->
1342<div class="form-check">
1343<label class="form-check-label">
1344<input class="form-check-input" type="checkbox" checked="checked">
1345 <span class="form-check-sign">
1346</span>
1347 Checked</label>
1348</div>
1349<!-- End of Checkbox -->
1350<!-- Checkbox -->
1351<div class="form-check disabled">
1352<label class="form-check-label">
1353<input class="form-check-input" type="checkbox" disabled="disabled">
1354 <span class="form-check-sign">
1355</span>
1356 Disabled Unchecked</label>
1357</div>
1358<!-- End of Checkbox -->
1359<!-- Checkbox -->
1360<div class="form-check disabled">
1361<label class="form-check-label">
1362<input class="form-check-input" type="checkbox" checked="checked" disabled="disabled">
1363 <span class="form-check-sign">
1364</span>
1365 Disabled Checked</label>
1366</div>
1367<!-- End of Checkbox -->
1368</div>
1369<div class="col-lg-3 col-md-6">
1370<!-- Checkboxes -->
1371<div class="mb-3">
1372<small class="font-weight-bold">
1373Checkboxes Round</small>
1374</div>
1375<!-- Checkbox -->
1376<div class="form-check round-check mb-3">
1377<label class="form-check-label">
1378<input class="form-check-input" type="checkbox">
1379 <span class="form-check-sign">
1380</span>
1381 Unchecked</label>
1382</div>
1383<!-- End of Checkbox -->
1384<!-- Checkbox -->
1385<div class="form-check round-check">
1386<label class="form-check-label">
1387<input class="form-check-input" type="checkbox" checked="checked">
1388 <span class="form-check-sign">
1389</span>
1390 Checked</label>
1391</div>
1392<!-- End of Checkbox -->
1393<!-- Checkbox -->
1394<div class="form-check round-check disabled">
1395<label class="form-check-label">
1396<input class="form-check-input" type="checkbox" disabled="disabled">
1397 <span class="form-check-sign">
1398</span>
1399 Disabled Unchecked</label>
1400</div>
1401<!-- End of Checkbox -->
1402<!-- Checkbox -->
1403<div class="form-check round-check disabled">
1404<label class="form-check-label">
1405<input class="form-check-input" type="checkbox" checked="checked" disabled="disabled">
1406 <span class="form-check-sign">
1407</span>
1408 Disabled Checked</label>
1409</div>
1410<!-- End of Checkbox -->
1411</div>
1412<div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
1413<!-- Radio buttons -->
1414<div class="mb-3">
1415<small class="font-weight-bold">
1416Radios</small>
1417</div>
1418<!-- Radio -->
1419<div class="form-check form-check-radio">
1420<label class="form-check-label">
1421<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
1422 <span class="form-check-sign">
1423</span>
1424 Radio is off</label>
1425</div>
1426<!-- End of Radio -->
1427<!-- Radio -->
1428<div class="form-check form-check-radio">
1429<label class="form-check-label">
1430<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="checked">
1431 <span class="form-check-sign">
1432</span>
1433 Radio is on</label>
1434</div>
1435<!-- End of Radio -->
1436<!-- Radio -->
1437<div class="form-check form-check-radio disabled">
1438<label class="form-check-label">
1439<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios3" value="option3" disabled="disabled">
1440 <span class="form-check-sign">
1441</span>
1442 Disabled radio is off</label>
1443</div>
1444<!-- End of Radio -->
1445<!-- Radio -->
1446<div class="form-check form-check-radio disabled">
1447<label class="form-check-label">
1448<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios4" value="option4" disabled="disabled" checked="checked">
1449 <span class="form-check-sign">
1450</span>
1451 Disabled radio is on</label>
1452</div>
1453<!-- End of Radio -->
1454</div>
1455<div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
1456<div class="mb-3">
1457<small class="font-weight-bold">
1458Switches</small>
1459</div>
1460<div class="custom-control custom-switch">
1461<input type="checkbox" class="custom-control-input" id="customSwitch1">
1462 <label class="custom-control-label" for="customSwitch1">
1463Toggle this switch element</label>
1464</div>
1465<div class="custom-control custom-switch">
1466<input type="checkbox" class="custom-control-input" disabled="disabled" id="customSwitch2">
1467 <label class="custom-control-label" for="customSwitch2">
1468Disabled switch element</label>
1469</div>
1470</div>
1471<div class="col-lg-6 col-sm-6 mt-4">
1472<div class="mb-3">
1473<small class="font-weight-bold">
1474Tags Input</small>
1475</div>
1476<!-- Tags Input -->
1477
<input type="text" class="form-control" value="Bootstrap,Angular,Vue,Wordpress,React,Java,Php,Gulp" data-role="tagsinput">
1478<!-- End of Tags Input -->
1479</div>
1480</div>
1481</div>
1482</div>
1483<!-- End of Section -->
1484<!-- Section -->
1485<div class="section section-md">
1486<div class="container">
1487<div class="row mt-4">
1488<div class="col-md-4">
1489<!-- Button Modal -->
1490 <button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-default">
1491Default</button>
1492<!-- Modal Content -->
1493<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
1494<div class="modal-dialog modal-dialog-centered" role="document">
1495<div class="modal-content">
1496<div class="modal-header">
1497<h6 class="modal-title">
1498Terms of Service</h6>
1499<button type="button" class="close" data-dismiss="modal" aria-label="Close">
1500<span aria-hidden="true">
1501×</span>
1502</button>
1503</div>
1504<div class="modal-body">
1505<p>
1506With 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>
1507<p>
1508The 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>
1509</div>
1510<div class="modal-footer">
1511<button type="button" class="btn btn-sm btn-secondary">
1512I Got It</button>
1513 <button type="button" class="btn btn-link text-danger ml-auto" data-dismiss="modal">
1514Close</button>
1515</div>
1516</div>
1517</div>
1518</div>
1519<!-- End of Modal Content -->
1520</div>
1521<div class="col-md-4">
1522<!-- Button Modal -->
1523 <button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-notification">
1524Notification</button>
1525<!-- Modal Content -->
1526<div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
1527<div class="modal-dialog modal-info modal-dialog-centered" role="document">
1528<div class="modal-content bg-gradient-secondary">
1529<div class="modal-header">
1530<p class="modal-title" id="modal-title-notification">
1531A new experience, personalized for you.</p>
1532<button type="button" class="close" data-dismiss="modal" aria-label="Close">
1533<span aria-hidden="true">
1534×</span>
1535</button>
1536</div>
1537<div class="modal-body">
1538<div class="py-3 text-center">
1539<span class="modal-icon display-1-lg">
1540<i class="far fa-envelope-open">
1541</i>
1542</span>
1543<h4 class="modal-title my-3">
1544Important message!</h4>
1545<p>
1546Do you know that you can assign status and relation to a company right in the visit list?.</p>
1547</div>
1548</div>
1549<div class="modal-footer">
1550<button type="button" class="btn btn-sm btn-white">
1551Go to Inbox</button>
1552</div>
1553</div>
1554</div>
1555</div>
1556<!-- End of Modal Content -->
1557</div>
1558</div>
1559</div>
1560</div>
1561<!-- End of Section -->
1562<!-- Section -->
1563<div class="section section-md">
1564<div class="container">
1565<div class="row">
1566<div class="col-md-10">
1567<!-- Nav Wrapper -->
1568<div class="nav-wrapper position-relative">
1569<ul class="nav nav-pills nav-fill flex-column flex-sm-row">
1570<li class="nav-item">
1571<a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">
1572Home</a>
1573</li>
1574<li class="nav-item">
1575<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1576Profile</a>
1577</li>
1578<li class="nav-item">
1579<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1580Settings</a>
1581</li>
1582<li class="nav-item">
1583<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1584Messages</a>
1585</li>
1586</ul>
1587</div>
1588<!-- End of Nav Wrapper -->
1589</div>
1590</div>
1591<!-- Title -->
1592<div class="row mt-5 mb-3">
1593<div class="col-md-4">
1594<div class="mb-2">
1595<h5>
1596Round Pill</h5>
1597</div>
1598</div>
1599</div>
1600<!-- End of Title -->
1601<div class="row">
1602<div class="col-md-10">
1603<!-- Nav Wrapper -->
1604<div class="nav-wrapper position-relative">
1605<ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
1606<li class="nav-item">
1607<a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">
1608Home</a>
1609</li>
1610<li class="nav-item">
1611<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1612Profile</a>
1613</li>
1614<li class="nav-item">
1615<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1616Settings</a>
1617</li>
1618<li class="nav-item">
1619<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1620Messages</a>
1621</li>
1622</ul>
1623</div>
1624<!-- End of Nav Wrapper -->
1625</div>
1626</div>
1627<!-- Title -->
1628<div class="row mt-5 mb-3">
1629<div class="col-md-4">
1630<div class="mb-2">
1631<h5>
1632Pills with Icons</h5>
1633</div>
1634</div>
1635</div>
1636<!-- End of Title -->
1637<div class="row">
1638<div class="col-md-10">
1639<!-- Nav Wrapper -->
1640<div class="nav-wrapper position-relative">
1641<ul class="nav nav-pills nav-fill flex-column flex-md-row">
1642<li class="nav-item">
1643<a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">
1644<i class="fas fa-tachometer-alt">
1645</i>
1646Dashboard</a>
1647</li>
1648<li class="nav-item">
1649<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1650<i class="far fa-user-circle">
1651</i>
1652Profile</a>
1653</li>
1654<li class="nav-item">
1655<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1656<i class="far fa-sun">
1657</i>
1658Settings</a>
1659</li>
1660<li class="nav-item">
1661<a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">
1662<i class="far fa-comments mr-2">
1663</i>
1664Messages</a>
1665</li>
1666</ul>
1667</div>
1668<!-- End of Nav Wrapper -->
1669</div>
1670</div>
1671<!-- Title -->
1672<div class="row mt-5 mb-3">
1673<div class="col-md-4">
1674<div class="mb-2">
1675<h5>
1676Vertical Pills</h5>
1677</div>
1678</div>
1679</div>
1680<!-- End of Title -->
1681<div class="row">
1682<div class="col-md-3">
1683<!-- Nav Wrapper -->
1684<div class="nav-wrapper position-relative">
1685<ul class="nav nav-pills square nav-fill flex-column vertical-tab">
1686<li class="nav-item">
1687<a class="nav-link active" data-toggle="tab" href="#">
1688<span class="d-block">
1689<i class="fas fa-dungeon">
1690</i>
1691Home</span>
1692</a>
1693</li>
1694<li class="nav-item">
1695<a class="nav-link" data-toggle="tab" href="#">
1696<span class="d-block">
1697<i class="far fa-user-circle">
1698</i>
1699Profile</span>
1700</a>
1701</li>
1702<li class="nav-item">
1703<a class="nav-link" data-toggle="tab" href="#">
1704<span class="d-block">
1705<i class="far fa-sun">
1706</i>
1707Settings</span>
1708</a>
1709</li>
1710<li class="nav-item">
1711<a class="nav-link" data-toggle="tab" href="#">
1712<span class="d-block">
1713<i class="far fa-comments mr-2">
1714</i>
1715Messages</span>
1716</a>
1717</li>
1718</ul>
1719</div>
1720<!-- End of Nav Wrapper -->
1721</div>
1722</div>
1723</div>
1724</div>
1725<!-- End of Section -->
1726<!-- Section -->
1727<div class="section section-md">
1728<div class="container">
1729<!-- Section title-->
1730<div class="row">
1731<div class="col-md-4">
1732<div class="mb-1">
1733<h5>
1734Square pagination</h5>
1735</div>
1736</div>
1737</div>
1738<!--End section title-->
1739<div class="row mt-4">
1740<div class="col-md-6">
1741<div class="mb-4">
1742<small class="font-weight-bold">
1743Square pagination with icon-nav</small>
1744</div>
1745<nav aria-label="Page navigation example">
1746<ul class="pagination">
1747<li class="page-item">
1748<a class="page-link" href="#">
1749<i class="fas fa-angle-double-left">
1750</i>
1751</a>
1752</li>
1753<li class="page-item">
1754<a class="page-link" href="#">
17551</a>
1756</li>
1757<li class="page-item active">
1758<a class="page-link" href="#">
17592</a>
1760</li>
1761<li class="page-item">
1762<a class="page-link" href="#">
17633</a>
1764</li>
1765<li class="page-item">
1766<a class="page-link" href="#">
17674</a>
1768</li>
1769<li class="page-item">
1770<a class="page-link" href="#">
17715</a>
1772</li>
1773<li class="page-item">
1774<a class="page-link" href="#">
1775<i class="fas fa-angle-double-right">
1776</i>
1777</a>
1778</li>
1779</ul>
1780</nav>
1781</div>
1782<div class="col-md-6">
1783<div class="mt-4 mb-4 mt-sm-0">
1784<small class="font-weight-bold">
1785Square pagination with text-nav</small>
1786</div>
1787<nav aria-label="Page navigation example">
1788<ul class="pagination">
1789<li class="page-item">
1790<a class="page-link" href="#">
1791Previous</a>
1792</li>
1793<li class="page-item">
1794<a class="page-link" href="#">
17951</a>
1796</li>
1797<li class="page-item active">
1798<a class="page-link" href="#">
17992</a>
1800</li>
1801<li class="page-item">
1802<a class="page-link" href="#">
18033</a>
1804</li>
1805<li class="page-item">
1806<a class="page-link" href="#">
18074</a>
1808</li>
1809<li class="page-item">
1810<a class="page-link" href="#">
18115</a>
1812</li>
1813<li class="page-item">
1814<a class="page-link" href="#">
1815Next</a>
1816</li>
1817</ul>
1818</nav>
1819</div>
1820</div>
1821<!-- Section title-->
1822<div class="row mt-5">
1823<div class="col-md-4">
1824<div class="mb-1">
1825<h5>
1826Round pagination</h5>
1827</div>
1828</div>
1829</div>
1830<!--End section title-->
1831<div class="row mt-4">
1832<div class="col-lg-6">
1833<div class="mb-4">
1834<small class="font-weight-bold">
1835Round pagination with icon-nav</small>
1836</div>
1837<nav aria-label="Page navigation example">
1838<ul class="pagination circle-pagination">
1839<li class="page-item">
1840<a class="page-link" href="#">
1841<i class="fas fa-angle-double-left">
1842</i>
1843</a>
1844</li>
1845<li class="page-item">
1846<a class="page-link" href="#">
18471</a>
1848</li>
1849<li class="page-item active">
1850<a class="page-link" href="#">
18512</a>
1852</li>
1853<li class="page-item">
1854<a class="page-link" href="#">
18553</a>
1856</li>
1857<li class="page-item">
1858<a class="page-link" href="#">
18594</a>
1860</li>
1861<li class="page-item">
1862<a class="page-link" href="#">
18635</a>
1864</li>
1865<li class="page-item">
1866<a class="page-link" href="#">
1867<i class="fas fa-angle-double-right">
1868</i>
1869</a>
1870</li>
1871</ul>
1872</nav>
1873</div>
1874<div class="col-lg-6">
1875<div class="mt-4 mb-4 mt-sm-0">
1876<small class="font-weight-bold">
1877Basic round pagination</small>
1878</div>
1879<nav aria-label="Page navigation example">
1880<ul class="pagination circle-pagination">
1881<li class="page-item">
1882<a class="page-link" href="#">
18831</a>
1884</li>
1885<li class="page-item active">
1886<a class="page-link" href="#">
18872</a>
1888</li>
1889<li class="page-item">
1890<a class="page-link" href="#">
18913</a>
1892</li>
1893<li class="page-item">
1894<a class="page-link" href="#">
18954</a>
1896</li>
1897<li class="page-item">
1898<a class="page-link" href="#">
18995</a>
1900</li>
1901</ul>
1902</nav>
1903</div>
1904</div>
1905<!-- Section title-->
1906<div class="row mt-5">
1907<div class="col-md-4">
1908<div class="mb-1">
1909<h5>
1910Options</h5>
1911</div>
1912</div>
1913</div>
1914<!--End section title-->
1915<div class="row mt-4">
1916<div class="col-lg-6">
1917<div class="mb-4">
1918<small class="font-weight-bold">
1919Disabled and active states</small>
1920</div>
1921<nav aria-label="Page navigation example">
1922<ul class="pagination">
1923<li class="page-item disabled">
1924<a class="page-link" tabindex="-1" href="#">
1925Previous</a>
1926</li>
1927<li class="page-item">
1928<a class="page-link" href="#">
19291</a>
1930</li>
1931<li class="page-item active">
1932<a class="page-link" href="#">
19332</a>
1934</li>
1935<li class="page-item">
1936<a class="page-link" href="#">
19373</a>
1938</li>
1939<li class="page-item">
1940<a class="page-link" href="#">
19414</a>
1942</li>
1943<li class="page-item">
1944<a class="page-link" href="#">
19455</a>
1946</li>
1947<li class="page-item">
1948<a class="page-link" href="#">
1949Next</a>
1950</li>
1951</ul>
1952</nav>
1953</div>
1954<div class="col-lg-6">
1955<div class="mt-4 mb-4 mt-sm-0">
1956<small class="font-weight-bold">
1957Choose your size</small>
1958</div>
1959<nav aria-label="Page navigation example">
1960<ul class="pagination pagination-lg">
1961<li class="page-item">
1962<a class="page-link" href="#">
1963<i class="fas fa-angle-double-left">
1964</i>
1965</a>
1966</li>
1967<li class="page-item">
1968<a class="page-link" href="#">
19691</a>
1970</li>
1971<li class="page-item active">
1972<a class="page-link" href="#">
19732</a>
1974</li>
1975<li class="page-item">
1976<a class="page-link" href="#">
19773</a>
1978</li>
1979<li class="page-item">
1980<a class="page-link" href="#">
19814</a>
1982</li>
1983<li class="page-item">
1984<a class="page-link" href="#">
19855</a>
1986</li>
1987<li class="page-item">
1988<a class="page-link" href="#">
1989<i class="fas fa-angle-double-right">
1990</i>
1991</a>
1992</li>
1993</ul>
1994</nav>
1995<nav aria-label="Page navigation example">
1996<ul class="pagination">
1997<li class="page-item">
1998<a class="page-link" href="#">
1999<i class="fas fa-angle-double-left">
2000</i>
2001</a>
2002</li>
2003<li class="page-item">
2004<a class="page-link" href="#">
20051</a>
2006</li>
2007<li class="page-item active">
2008<a class="page-link" href="#">
20092</a>
2010</li>
2011<li class="page-item">
2012<a class="page-link" href="#">
20133</a>
2014</li>
2015<li class="page-item">
2016<a class="page-link" href="#">
20174</a>
2018</li>
2019<li class="page-item">
2020<a class="page-link" href="#">
20215</a>
2022</li>
2023<li class="page-item">
2024<a class="page-link" href="#">
2025<i class="fas fa-angle-double-right">
2026</i>
2027</a>
2028</li>
2029</ul>
2030</nav>
2031<nav aria-label="Page navigation example">
2032<ul class="pagination pagination-sm">
2033<li class="page-item">
2034<a class="page-link" href="#">
2035<i class="fas fa-angle-double-left">
2036</i>
2037</a>
2038</li>
2039<li class="page-item">
2040<a class="page-link" href="#">
20411</a>
2042</li>
2043<li class="page-item active">
2044<a class="page-link" href="#">
20452</a>
2046</li>
2047<li class="page-item">
2048<a class="page-link" href="#">
20493</a>
2050</li>
2051<li class="page-item">
2052<a class="page-link" href="#">
20534</a>
2054</li>
2055<li class="page-item">
2056<a class="page-link" href="#">
20575</a>
2058</li>
2059<li class="page-item">
2060<a class="page-link" href="#">
2061<i class="fas fa-angle-double-right">
2062</i>
2063</a>
2064</li>
2065</ul>
2066</nav>
2067</div>
2068</div>
2069</div>
2070</div>
2071<!-- End of Section -->
2072<!-- Section -->
2073<div class="section section-md">
2074<div class="container">
2075<div class="row justify-content-center">
2076<div class="col-lg-6">
2077<div class="progress-wrapper">
2078<div class="progress-info">
2079<div class="progress-label">
2080<span class="text-primary">
2081Primary Color</span>
2082</div>
2083<div class="progress-percentage">
2084<span>
208550%</span>
2086</div>
2087</div>
2088<div class="progress">
2089<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
2090</div>
2091</div>
2092</div>
2093<div class="progress-wrapper">
2094<div class="progress-info">
2095<div class="progress-label">
2096<span class="text-secondary">
2097Secondary Color</span>
2098</div>
2099<div class="progress-percentage">
2100<span>
210160%</span>
2102</div>
2103</div>
2104<div class="progress">
2105<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2106</div>
2107</div>
2108</div>
2109<div class="progress-wrapper">
2110<div class="progress-info">
2111<div class="progress-label">
2112<span class="text-tertiary">
2113Tertiary Color</span>
2114</div>
2115<div class="progress-percentage">
2116<span>
211760%</span>
2118</div>
2119</div>
2120<div class="progress">
2121<div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2122</div>
2123</div>
2124</div>
2125<div class="progress-wrapper">
2126<div class="progress-info">
2127<div class="progress-label">
2128<span class="text-dark">
2129Dark Color</span>
2130</div>
2131<div class="progress-percentage">
2132<span>
213360%</span>
2134</div>
2135</div>
2136<div class="progress">
2137<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2138</div>
2139</div>
2140</div>
2141<div class="progress-wrapper">
2142<div class="progress-info">
2143<div class="progress-label">
2144<span class="text-gray">
2145Gray Color</span>
2146</div>
2147<div class="progress-percentage">
2148<span>
214960%</span>
2150</div>
2151</div>
2152<div class="progress">
2153<div class="progress-bar bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2154</div>
2155</div>
2156</div>
2157<div class="progress-wrapper">
2158<div class="progress-info">
2159<div class="progress-label">
2160<span class="text-success">
2161Success Bar</span>
2162</div>
2163<div class="progress-percentage">
2164<span>
216560%</span>
2166</div>
2167</div>
2168<div class="progress">
2169<div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2170</div>
2171</div>
2172</div>
2173<div class="progress-wrapper">
2174<div class="progress-info">
2175<div class="progress-label">
2176<span class="text-info">
2177Info Bar</span>
2178</div>
2179<div class="progress-percentage">
2180<span>
218160%</span>
2182</div>
2183</div>
2184<div class="progress">
2185<div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2186</div>
2187</div>
2188</div>
2189<div class="progress-wrapper">
2190<div class="progress-info">
2191<div class="progress-label">
2192<span class="text-danger">
2193Danger Bar</span>
2194</div>
2195<div class="progress-percentage">
2196<span>
219760%</span>
2198</div>
2199</div>
2200<div class="progress">
2201<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2202</div>
2203</div>
2204</div>
2205<div class="progress-wrapper">
2206<div class="progress-info">
2207<div class="progress-label">
2208<span class="text-warning">
2209Warning Bar</span>
2210</div>
2211<div class="progress-percentage">
2212<span>
221360%</span>
2214</div>
2215</div>
2216<div class="progress">
2217<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
2218</div>
2219</div>
2220</div>
2221</div>
2222</div>
2223</div>
2224</div>
2225<!-- End of Section -->
2226<!-- End of Hero -->
2227<div class="section section-md">
2228<div class="container">
2229<div class="row justify-content-center">
2230<div class="col-lg-12">
2231<div class="mb-5">
2232<h6 class="mb-3">
2233Default table</h6>
2234<table class="table">
2235<thead>
2236<tr>
2237<th scope="col">
2238#</th>
2239<th scope="col">
2240First</th>
2241<th scope="col">
2242Last</th>
2243<th scope="col">
2244Actions</th>
2245</tr>
2246</thead>
2247<tbody>
2248<tr>
2249<th scope="row">
22501</th>
2251<td>
2252<div class="d-flex align-items-center">
2253Zoltan <span class="badge badge-primary ml-2">
2254Pro</span>
2255</div>
2256</td>
2257<td>
2258Robi</td>
2259<td>
2260<div class="d-flex">
2261<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item">
2262</i>
2263 <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item">
2264</i>
2265</div>
2266</td>
2267</tr>
2268<tr>
2269<th scope="row">
22702</th>
2271<td>
2272<div class="d-flex align-items-center">
2273Jacob <span class="badge badge-secondary ml-2">
2274Mid</span>
2275</div>
2276</td>
2277<td>
2278Thornton</td>
2279<td>
2280<div class="d-flex">
2281<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item">
2282</i>
2283 <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item">
2284</i>
2285</div>
2286</td>
2287</tr>
2288<tr>
2289<th scope="row">
22903</th>
2291<td>
2292<div class="d-flex align-items-center">
2293Larry <span class="badge badge-tertiary ml-2">
2294Noob</span>
2295</div>
2296</td>
2297<td>
2298the Bird</td>
2299<td>
2300<div class="d-flex">
2301<i class="fas fa-edit mr-3" data-toggle="tooltip" data-placement="top" title="Edit item">
2302</i>
2303 <i class="fas fa-trash text-danger mr-2" data-toggle="tooltip" data-placement="top" title="Delete item">
2304</i>
2305</div>
2306</td>
2307</tr>
2308</tbody>
2309</table>
2310</div>
2311<div class="mb-5">
2312<h6 class="mb-3">
2313Dark table</h6>
2314<table class="table table-dark">
2315<thead>
2316<tr>
2317<th scope="col">
2318#</th>
2319<th scope="col">
2320First</th>
2321<th scope="col">
2322Last</th>
2323<th scope="col">
2324Handle</th>
2325</tr>
2326</thead>
2327<tbody>
2328<tr>
2329<th scope="row">
23301</th>
2331<td>
2332Zoltan</td>
2333<td>
2334Robi</td>
2335<td>
2336@calota</td>
2337</tr>
2338<tr>
2339<th scope="row">
23402</th>
2341<td>
2342Jacob</td>
2343<td>
2344Thornton</td>
2345<td>
2346@fat</td>
2347</tr>
2348<tr>
2349<th scope="row">
23503</th>
2351<td>
2352Larry</td>
2353<td>
2354the Bird</td>
2355<td>
2356@twitter</td>
2357</tr>
2358</tbody>
2359</table>
2360</div>
2361<div class="mb-5">
2362<h6 class="mb-3">
2363Table head colors</h6>
2364<table class="table">
2365<thead class="thead-dark">
2366<tr>
2367<th scope="col">
2368#</th>
2369<th scope="col">
2370First</th>
2371<th scope="col">
2372Last</th>
2373<th scope="col">
2374Handle</th>
2375</tr>
2376</thead>
2377<tbody>
2378<tr>
2379<th scope="row">
23801</th>
2381<td>
2382Zoltan</td>
2383<td>
2384Robi</td>
2385<td>
2386@calota</td>
2387</tr>
2388<tr>
2389<th scope="row">
23902</th>
2391<td>
2392Jacob</td>
2393<td>
2394Thornton</td>
2395<td>
2396@fat</td>
2397</tr>
2398<tr>
2399<th scope="row">
24003</th>
2401<td>
2402Larry</td>
2403<td>
2404the Bird</td>
2405<td>
2406@twitter</td>
2407</tr>
2408</tbody>
2409</table>
2410<table class="table">
2411<thead class="thead-light">
2412<tr>
2413<th scope="col">
2414#</th>
2415<th scope="col">
2416First</th>
2417<th scope="col">
2418Last</th>
2419<th scope="col">
2420Handle</th>
2421</tr>
2422</thead>
2423<tbody>
2424<tr>
2425<th scope="row">
24261</th>
2427<td>
2428Zoltan</td>
2429<td>
2430Robi</td>
2431<td>
2432@calota</td>
2433</tr>
2434<tr>
2435<th scope="row">
24362</th>
2437<td>
2438Jacob</td>
2439<td>
2440Thornton</td>
2441<td>
2442@fat</td>
2443</tr>
2444<tr>
2445<th scope="row">
24463</th>
2447<td>
2448Larry</td>
2449<td>
2450the Bird</td>
2451<td>
2452@twitter</td>
2453</tr>
2454</tbody>
2455</table>
2456</div>
2457<div class="mb-5">
2458<h6 class="mb-3">
2459Striped rows</h6>
2460<table class="table table-striped">
2461<thead>
2462<tr>
2463<th scope="col">
2464#</th>
2465<th scope="col">
2466First</th>
2467<th scope="col">
2468Last</th>
2469<th scope="col">
2470Handle</th>
2471</tr>
2472</thead>
2473<tbody>
2474<tr>
2475<th scope="row">
24761</th>
2477<td>
2478Zoltan</td>
2479<td>
2480Robi</td>
2481<td>
2482@calota</td>
2483</tr>
2484<tr>
2485<th scope="row">
24862</th>
2487<td>
2488Jacob</td>
2489<td>
2490Thornton</td>
2491<td>
2492@fat</td>
2493</tr>
2494<tr>
2495<th scope="row">
24963</th>
2497<td>
2498Larry</td>
2499<td>
2500the Bird</td>
2501<td>
2502@twitter</td>
2503</tr>
2504</tbody>
2505</table>
2506</div>
2507<div class="mb-5">
2508<h6 class="mb-3">
2509Table bordered</h6>
2510<table class="table table-bordered">
2511<thead>
2512<tr>
2513<th scope="col">
2514#</th>
2515<th scope="col">
2516First</th>
2517<th scope="col">
2518Last</th>
2519<th scope="col">
2520Handle</th>
2521</tr>
2522</thead>
2523<tbody>
2524<tr>
2525<th scope="row">
25261</th>
2527<td>
2528Zoltan</td>
2529<td>
2530Robi</td>
2531<td>
2532@calota</td>
2533</tr>
2534<tr>
2535<th scope="row">
25362</th>
2537<td>
2538Jacob</td>
2539<td>
2540Thornton</td>
2541<td>
2542@fat</td>
2543</tr>
2544<tr>
2545<th scope="row">
25463</th>
2547<td colspan="2">
2548Larry the Bird</td>
2549<td>
2550@twitter</td>
2551</tr>
2552</tbody>
2553</table>
2554<h6 class="mb-3 mt-5">
2555Table bordered dark</h6>
2556<table class="table table-bordered table-dark">
2557<thead>
2558<tr>
2559<th scope="col">
2560#</th>
2561<th scope="col">
2562First</th>
2563<th scope="col">
2564Last</th>
2565<th scope="col">
2566Handle</th>
2567</tr>
2568</thead>
2569<tbody>
2570<tr>
2571<th scope="row">
25721</th>
2573<td>
2574Zoltan</td>
2575<td>
2576Robi</td>
2577<td>
2578@calota</td>
2579</tr>
2580<tr>
2581<th scope="row">
25822</th>
2583<td>
2584Jacob</td>
2585<td>
2586Thornton</td>
2587<td>
2588@fat</td>
2589</tr>
2590<tr>
2591<th scope="row">
25923</th>
2593<td colspan="2">
2594Larry the Bird</td>
2595<td>
2596@twitter</td>
2597</tr>
2598</tbody>
2599</table>
2600</div>
2601<div class="mb-5">
2602<h6 class="mb-3">
2603Hoverable rows</h6>
2604<table class="table table-hover">
2605<thead>
2606<tr>
2607<th scope="col">
2608#</th>
2609<th scope="col">
2610First</th>
2611<th scope="col">
2612Last</th>
2613<th scope="col">
2614Handle</th>
2615</tr>
2616</thead>
2617<tbody>
2618<tr>
2619<th scope="row">
26201</th>
2621<td>
2622Zoltan</td>
2623<td>
2624Robi</td>
2625<td>
2626@calota</td>
2627</tr>
2628<tr>
2629<th scope="row">
26302</th>
2631<td>
2632Jacob</td>
2633<td>
2634Thornton</td>
2635<td>
2636@fat</td>
2637</tr>
2638<tr>
2639<th scope="row">
26403</th>
2641<td colspan="2">
2642Larry the Bird</td>
2643<td>
2644@twitter</td>
2645</tr>
2646</tbody>
2647</table>
2648<h6 class="mb-3 mt-5">
2649Hoverable dark rows</h6>
2650<table class="table table-hover table-dark">
2651<thead>
2652<tr>
2653<th scope="col">
2654#</th>
2655<th scope="col">
2656First</th>
2657<th scope="col">
2658Last</th>
2659<th scope="col">
2660Handle</th>
2661</tr>
2662</thead>
2663<tbody>
2664<tr>
2665<th scope="row">
26661</th>
2667<td>
2668Zoltan</td>
2669<td>
2670Robi</td>
2671<td>
2672@calota</td>
2673</tr>
2674<tr>
2675<th scope="row">
26762</th>
2677<td>
2678Jacob</td>
2679<td>
2680Thornton</td>
2681<td>
2682@fat</td>
2683</tr>
2684<tr>
2685<th scope="row">
26863</th>
2687<td colspan="2">
2688Larry the Bird</td>
2689<td>
2690@twitter</td>
2691</tr>
2692</tbody>
2693</table>
2694</div>
2695<div class="mb-5">
2696<h6 class="mb-3">
2697Small tables</h6>
2698<table class="table table-sm">
2699<thead>
2700<tr>
2701<th scope="col">
2702#</th>
2703<th scope="col">
2704First</th>
2705<th scope="col">
2706Last</th>
2707<th scope="col">
2708Handle</th>
2709</tr>
2710</thead>
2711<tbody>
2712<tr>
2713<th scope="row">
27141</th>
2715<td>
2716Zoltan</td>
2717<td>
2718Robi</td>
2719<td>
2720@calota</td>
2721</tr>
2722<tr>
2723<th scope="row">
27242</th>
2725<td>
2726Jacob</td>
2727<td>
2728Thornton</td>
2729<td>
2730@fat</td>
2731</tr>
2732<tr>
2733<th scope="row">
27343</th>
2735<td colspan="2">
2736Larry the Bird</td>
2737<td>
2738@twitter</td>
2739</tr>
2740</tbody>
2741</table>
2742<h6 class="mb-3 mt-5">
2743Small dark tables</h6>
2744<table class="table table-sm table-dark">
2745<thead>
2746<tr>
2747<th scope="col">
2748#</th>
2749<th scope="col">
2750First</th>
2751<th scope="col">
2752Last</th>
2753<th scope="col">
2754Handle</th>
2755</tr>
2756</thead>
2757<tbody>
2758<tr>
2759<th scope="row">
27601</th>
2761<td>
2762Zoltan</td>
2763<td>
2764Robi</td>
2765<td>
2766@calota</td>
2767</tr>
2768<tr>
2769<th scope="row">
27702</th>
2771<td>
2772Jacob</td>
2773<td>
2774Thornton</td>
2775<td>
2776@fat</td>
2777</tr>
2778<tr>
2779<th scope="row">
27803</th>
2781<td colspan="2">
2782Larry the Bird</td>
2783<td>
2784@twitter</td>
2785</tr>
2786</tbody>
2787</table>
2788</div>
2789</div>
2790</div>
2791</div>
2792</div>
2793<!-- Section -->
2794<div class="section section-md">
2795<div class="container">
2796<div class="row justify-content-center">
2797<div class="col-12 col-md-10 col-lg-8">
2798<!-- Tab Nav -->
2799<div class="nav-wrapper position-relative mb-2">
2800<ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-text" role="tablist">
2801<li class="nav-item">
2802<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">
2803Home</a>
2804</li>
2805<li class="nav-item">
2806<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">
2807Profile</a>
2808</li>
2809<li class="nav-item">
2810<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">
2811Messages</a>
2812</li>
2813</ul>
2814</div>
2815<!-- End of Tab Nav -->
2816<!-- Tab Content -->
2817<div class="card">
2818<div class="card-body p-0">
2819<div class="tab-content" id="tabcontent1">
2820<div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab">
2821<p>
2822Exercitation 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>
2823<p>
2824Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
2825</div>
2826<div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab">
2827<p>
2828Photo 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>
2829<p>
2830Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
2831</div>
2832<div class="tab-pane fade" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab">
2833<p>
2834Exercitation 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>
2835<p>
2836Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p>
2837</div>
2838</div>
2839</div>
2840</div>
2841<!-- End of Tab Content -->
2842</div>
2843</div>
2844</div>
2845</div>
2846<!-- End of Section -->
2847<!-- Section -->
2848<div class="section section-md">
2849<div class="container">
2850<div class="row mt-4">
2851<div class="col-md-6 col-lg-4">
2852<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
2853<div class="toast-header text-primary">
2854<i class="fab fa-bootstrap">
2855</i>
2856 <strong class="mr-auto ml-2">
2857Bootstrap</strong>
2858 <small class="text-muted">
285911 mins ago</small>
2860 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
2861<span aria-hidden="true">
2862×</span>
2863</button>
2864</div>
2865<div class="toast-body">
2866Hello, world! This is a toast message.</div>
2867</div>
2868</div>
2869<div class="col-md-6 col-lg-4">
2870<div class="toast bg-primary text-white fade show" role="alert" aria-live="assertive" aria-atomic="true">
2871<div class="toast-header text-primary">
2872<i class="fab fa-bootstrap">
2873</i>
2874 <strong class="mr-auto ml-2">
2875Bootstrap</strong>
2876 <small>
287711 mins ago</small>
2878 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
2879<span aria-hidden="true">
2880×</span>
2881</button>
2882</div>
2883<div class="toast-body">
2884Hello, world! This is a toast message.</div>
2885</div>
2886</div>
2887<div class="col-md-6 col-lg-4">
2888<div class="toast bg-tertiary text-white fade show" role="alert" aria-live="assertive" aria-atomic="true">
2889<div class="toast-header bg-tertiary text-white">
2890<i class="fab fa-bootstrap">
2891</i>
2892 <strong class="mr-auto ml-2">
2893Bootstrap</strong>
2894 <small>
289511 mins ago</small>
2896 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
2897<span class="text-white" aria-hidden="true">
2898×</span>
2899</button>
2900</div>
2901<div class="toast-body">
2902Hello, world! This is a toast message.</div>
2903</div>
2904</div>
2905</div>
2906</div>
2907</div>
2908<!-- End of Section -->
2909<!-- Section -->
2910<div class="section section-md">
2911<div class="container">
2912<!-- End of Title -->
2913<div class="row mt-5">
2914<div class="col-lg-12 d-block d-md-flex justify-content-around">
2915<button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
2916Tooltip on top</button>
2917 <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
2918Tooltip on right</button>
2919 <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
2920Tooltip on bottom</button>
2921 <button type="button" class="btn btn-secondary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
2922Tooltip on left</button>
2923</div>
2924</div>
2925</div>
2926</div>
2927<!-- End of Section -->
2928<!-- Section -->
2929<div class="section section-md">
2930<div class="container">
2931<!-- Title -->
2932<div class="row">
2933<div class="col-md-4">
2934<div class="mb-5">
2935<h6 class="font-weight-bold">
2936Headings</h6>
2937</div>
2938</div>
2939</div>
2940<!-- End of Title -->
2941<div class="row">
2942<div class="col-md-12">
2943<h1>
2944h1. Bootstrap heading</h1>
2945<h2>
2946h2. Bootstrap heading</h2>
2947<h3>
2948h3. Bootstrap heading</h3>
2949<h4>
2950h4. Bootstrap heading</h4>
2951<h5>
2952h5. Bootstrap heading</h5>
2953<h6>
2954h6. Bootstrap heading</h6>
2955</div>
2956</div>
2957<!-- Title -->
2958<div class="row">
2959<div class="col-md-4">
2960<div class="mt-6 mb-5">
2961<h6 class="font-weight-bold">
2962Customizing headings</h6>
2963</div>
2964</div>
2965</div>
2966<!-- End of Title -->
2967<div class="row">
2968<div class="col-md-12">
2969<h1>
2970Fancy display heading <small class="text-muted">
2971With faded secondary text</small>
2972</h1>
2973<h2>
2974Fancy display heading <small class="text-muted">
2975With faded secondary text</small>
2976</h2>
2977<h3>
2978Fancy display heading <small class="text-muted">
2979With faded secondary text</small>
2980</h3>
2981<h4>
2982Fancy display heading <small class="text-muted">
2983With faded secondary text</small>
2984</h4>
2985<h5>
2986Fancy display heading <small class="text-muted">
2987With faded secondary text</small>
2988</h5>
2989<h6>
2990Fancy display heading <small class="text-muted">
2991With faded secondary text</small>
2992</h6>
2993</div>
2994</div>
2995<!-- Title -->
2996<div class="row">
2997<div class="col-md-4">
2998<div class="mt-6 mb-5">
2999<h6 class="font-weight-bold">
3000Display headings</h6>
3001</div>
3002</div>
3003</div>
3004<!-- End of Title -->
3005<div class="row">
3006<div class="col-md-12">
3007<h1 class="display-1">
3008Display 1</h1>
3009<h1 class="display-2">
3010Display 2</h1>
3011<h1 class="display-3">
3012Display 3</h1>
3013<h1 class="display-4">
3014Display 4</h1>
3015</div>
3016</div>
3017<!-- Title -->
3018<div class="row">
3019<div class="col-md-4">
3020<div class="mt-6 mb-5">
3021<h6 class="font-weight-bold">
3022Paragraphs</h6>
3023</div>
3024</div>
3025</div>
3026<!-- End of Title -->
3027<div class="row">
3028<div class="col-md-6">
3029<div class="mb-3">
3030<h6 class="font-weight-bold">
3031Simple paragraph</h6>
3032</div>
3033<p>
3034Start 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>
3035</div>
3036<div class="col-md-6">
3037<div class="mt-5 mb-3 mt-sm-0">
3038<h6 class="font-weight-bold">
3039Lead paragraph</h6>
3040</div>
3041<p class="lead">
3042Start 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>
3043</div>
3044</div>
3045<div class="row mt-5 py-3 align-items-center">
3046<div class="col-sm-2">
3047<small class="text-uppercase text-muted">
3048Light text</small>
3049</div>
3050<div class="col-sm-10">
3051<p class="text-light mb-0">
3052Design is not just what it looks like and feels like. Design is how it works.</p>
3053</div>
3054</div>
3055<div class="row py-3 align-items-center">
3056<div class="col-sm-2">
3057<small class="text-uppercase text-muted">
3058Muted text</small>
3059</div>
3060<div class="col-sm-10">
3061<p class="text-muted mb-0">
3062Design is not just what it looks like and feels like. Design is how it works.</p>
3063</div>
3064</div>
3065<div class="row py-3 align-items-center">
3066<div class="col-sm-2">
3067<small class="text-uppercase text-muted">
3068Dark text</small>
3069</div>
3070<div class="col-sm-10">
3071<p class="text-dark mb-0">
3072Design is not just what it looks like and feels like. Design is how it works.</p>
3073</div>
3074</div>
3075<div class="row py-3 align-items-center">
3076<div class="col-sm-2">
3077<small class="text-uppercase text-muted">
3078Primary text</small>
3079</div>
3080<div class="col-sm-10">
3081<p class="text-primary mb-0">
3082Design is not just what it looks like and feels like. Design is how it works.</p>
3083</div>
3084</div>
3085<div class="row py-3 align-items-center">
3086<div class="col-sm-2">
3087<small class="text-uppercase text-muted">
3088Secondary text</small>
3089</div>
3090<div class="col-sm-10">
3091<p class="text-secondary mb-0">
3092Design is not just what it looks like and feels like. Design is how it works.</p>
3093</div>
3094</div>
3095<div class="row py-3 align-items-center">
3096<div class="col-sm-2">
3097<small class="text-uppercase text-muted">
3098Tertiary text</small>
3099</div>
3100<div class="col-sm-10">
3101<p class="text-tertiary mb-0">
3102Design is not just what it looks like and feels like. Design is how it works.</p>
3103</div>
3104</div>
3105<div class="row py-3 align-items-center">
3106<div class="col-sm-2">
3107<small class="text-uppercase text-muted">
3108Info text</small>
3109</div>
3110<div class="col-sm-10">
3111<p class="text-info mb-0">
3112Design is not just what it looks like and feels like. Design is how it works.</p>
3113</div>
3114</div>
3115<div class="row py-3 align-items-center">
3116<div class="col-sm-2">
3117<small class="text-uppercase text-muted">
3118Danger text</small>
3119</div>
3120<div class="col-sm-10">
3121<p class="text-danger mb-0">
3122Design is not just what it looks like and feels like. Design is how it works.</p>
3123</div>
3124</div>
3125<div class="row py-3 align-items-center">
3126<div class="col-sm-2">
3127<small class="text-uppercase text-muted">
3128Success text</small>
3129</div>
3130<div class="col-sm-10">
3131<p class="text-success mb-0">
3132Design is not just what it looks like and feels like. Design is how it works.</p>
3133</div>
3134</div>
3135<div class="row py-3 align-items-center">
3136<div class="col-sm-2">
3137<small class="text-uppercase text-muted">
3138Warning text</small>
3139</div>
3140<div class="col-sm-10">
3141<p class="text-warning mb-0">
3142Design is not just what it looks like and feels like. Design is how it works.</p>
3143</div>
3144</div>
3145<!-- Title -->
3146<div class="row">
3147<div class="col-md-4">
3148<div class="mt-6 mb-5">
3149<h6 class="font-weight-bold">
3150Inline Text Elements</h6>
3151</div>
3152</div>
3153</div>
3154<!-- End of Title -->
3155<div class="row">
3156<div class="col-md-6">
3157<p>
3158You can use the mark tag to <mark>
3159highlight</mark>
3160 text.</p>
3161<p>
3162<del>
3163This line of text is meant to be treated as deleted text.</del>
3164</p>
3165<p>
3166<s>
3167This line of text is meant to be treated as no longer accurate.</s>
3168</p>
3169<p>
3170<ins>
3171This line of text is meant to be treated as an addition to the document.</ins>
3172</p>
3173<p>
3174<u>
3175This line of text will render as underlined</u>
3176</p>
3177<p>
3178<small>
3179This line of text is meant to be treated as fine print.</small>
3180</p>
3181<p>
3182<strong>
3183This line rendered as bold text.</strong>
3184</p>
3185<p>
3186<em>
3187This line rendered as italicized text.</em>
3188</p>
3189</div>
3190</div>
3191<!-- Title -->
3192<div class="row">
3193<div class="col-md-4">
3194<div class="mt-6 mb-5">
3195<h6 class="font-weight-bold">
3196Blockquote</h6>
3197</div>
3198</div>
3199</div>
3200<!-- End of Title -->
3201<div class="row">
3202<div class="col-md-8">
3203<blockquote class="blockquote text-center">
3204Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.<footer class="blockquote-footer mt-3 text-primary">
3205Zoltan Szőgyényi</footer>
3206</blockquote>
3207</div>
3208</div>
3209<!-- Title -->
3210<div class="row">
3211<div class="col-md-4">
3212<div class="mt-6 mb-5">
3213<h6 class="font-weight-bold">
3214Lists</h6>
3215</div>
3216</div>
3217</div>
3218<!-- End of Title -->
3219<div class="row">
3220<div class="col-md-6">
3221<div class="mb-3">
3222<h6 class="font-weight-bold">
3223Unordered</h6>
3224</div>
3225<ul>
3226<li>
3227Minutes of the last meeting</li>
3228<li>
3229Do we need yet more meetings?</li>
3230<li>
3231Any other business<ul>
3232<li>
3233Programming</li>
3234<li>
3235Web Design</li>
3236<li>
3237Database</li>
3238</ul>
3239</li>
3240<li>
3241Something funny</li>
3242</ul>
3243</div>
3244<div class="col-md-6">
3245<div class="mt-5 mb-3 mt-sm-0">
3246<h6 class="font-weight-bold">
3247Ordered</h6>
3248</div>
3249<ol>
3250<li>
3251Minutes of the last meeting</li>
3252<li>
3253Do we need yet more meetings?</li>
3254<li>
3255Any other business<ol>
3256<li>
3257Programming</li>
3258<li>
3259Web Design</li>
3260<li>
3261Database</li>
3262</ol>
3263</li>
3264<li>
3265Something funny</li>
3266</ol>
3267</div>
3268</div>
3269</div>
3270</div>
3271<!-- End of Section -->
3272<section class="section section-lg bg-white">
3273<div class="container">
3274<div class="row">
3275<div class="col-12 col-lg-8">
3276<h2 class="h1 font-weight-light mb-3">
3277<strong>
3278Open source</strong>
3279 project</h2>
3280<p class="lead mb-4">
3281Pixel 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>
3282<div class="d-flex align-items-center">
3283<a href="https://github.com/themesberg/pixel-bootstrap-ui-kit" target="_blank" class="btn btn-tertiary mr-4 animate-up-2">
3284View on GitHub </a>
3285<!-- Place this tag where you want the button to render. -->
3286<div class="mt-2">
3287<!-- Place this tag where you want the button to render. -->
3288 <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">
3289Star</a>
3290</div>
3291</div>
3292</div>
3293<div class="col-12 col-lg-4">
3294<div class="github-big-icon">
3295<i class="fab fa-github">
3296</i>
3297</div>
3298</div>
3299</div>
3300<div class="row mt-6">
3301<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
3302<div class="card border-light p-4">
3303<!-- Header -->
3304<div class="card-header bg-white pb-0">
3305<span class="d-block">
3306<span class="h2 text-primary font-weight-bold">
3307<span class="align-top font-medium">
3308</span>
3309Free Version</span>
3310</span>
3311</div>
3312<!-- End Header -->
3313<!-- Content -->
3314<div class="card-body">
3315<ul class="list-group list-group-flush price-list">
3316<li class="list-group-item bg-white pl-0">
3317<strong>
331880</strong>
3319 Components</li>
3320<li class="list-group-item bg-white pl-0">
3321<strong>
33224</strong>
3323 Example Pages</li>
3324<li class="list-group-item bg-white pl-0">
3325<span class="icon-danger">
3326<i class="fas fa-times-circle">
3327</i>
3328</span>
3329 Uncoventional cards</li>
3330<li class="list-group-item bg-white pl-0">
3331<span class="icon-danger">
3332<i class="fas fa-times-circle">
3333</i>
3334</span>
3335 Timelines</li>
3336<li class="list-group-item bg-white pl-0">
3337<span class="icon-danger">
3338<i class="fas fa-times-circle">
3339</i>
3340</span>
3341 E-commerce</li>
3342<li class="list-group-item bg-white pl-0">
3343<span class="icon-danger">
3344<i class="fas fa-times-circle">
3345</i>
3346</span>
3347 Charts</li>
3348<li class="list-group-item bg-white pl-0 pb-0">
3349<span class="icon-danger">
3350<i class="fas fa-times-circle">
3351</i>
3352</span>
3353 Premium Support</li>
3354</ul>
3355</div>
3356<!-- End Content -->
3357</div>
3358</div>
3359<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0 mt-lg-n5">
3360<div class="card border-light p-4">
3361<!-- Header -->
3362<div class="card-header bg-white pb-0">
3363<span class="d-block">
3364<span class="h2 text-primary font-weight-bold">
3365<span class="align-top font-medium">
3366</span>
3367Pro Version</span>
3368</span>
3369</div>
3370<!-- End Header -->
3371<!-- Content -->
3372<div class="card-body">
3373<ul class="list-group list-group-flush price-list mb-5">
3374<li class="list-group-item bg-white pl-0">
3375<strong>
33761000+</strong>
3377 Components</li>
3378<li class="list-group-item bg-white pl-0">
3379<strong>
338017</strong>
3381 Example Pages</li>
3382<li class="list-group-item bg-white pl-0">
3383<span class="icon-success">
3384<i class="fas fa-check-circle">
3385</i>
3386</span>
3387 Uncoventional cards</li>
3388<li class="list-group-item bg-white pl-0">
3389<span class="icon-success">
3390<i class="fas fa-check-circle">
3391</i>
3392</span>
3393 Timelines</li>
3394<li class="list-group-item bg-white pl-0">
3395<span class="icon-success">
3396<i class="fas fa-check-circle">
3397</i>
3398</span>
3399 E-commerce</li>
3400<li class="list-group-item bg-white pl-0">
3401<span class="icon-success">
3402<i class="fas fa-check-circle">
3403</i>
3404</span>
3405 Charts</li>
3406<li class="list-group-item bg-white border-0 pl-0 pb-0">
3407<span class="icon-success">
3408<i class="fas fa-check-circle">
3409</i>
3410</span>
3411 Premium Support</li>
3412</ul>
3413<a href="https://demo.themesberg.com/pixel-pro/" target="_blank" class="btn btn-block btn-tertiary mr-4 animate-up-2">
3414Live demo <i class="fas fa-external-link-alt ml-2">
3415</i>
3416</a>
3417</div>
3418<!-- End Content -->
3419</div>
3420</div>
3421</div>
3422</div>
3423</section>
3424</main>
3425<footer class="footer pt-7 pb-6 bg-primary text-white">
3426<div class="container">
3427<div class="row">
3428<div class="col-md-4">
3429<p>
3430<strong>
3431Pixel</strong>
3432 is a large User Interface Kit that will help you prototype and design beautiful, creative and modern websites.</p>
3433<ul class="social-buttons mb-5 mb-lg-0">
3434<li>
3435<a href="https://twitter.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Follow us on Twitter">
3436<i class="fab fa-twitter">
3437</i>
3438</a>
3439</li>
3440<li>
3441<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">
3442<i class="fab fa-facebook">
3443</i>
3444</a>
3445</li>
3446<li>
3447<a href="https://github.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Star us on Github">
3448<i class="fab fa-github">
3449</i>
3450</a>
3451</li>
3452<li>
3453<a href="https://dribbble.com/themesberg" class="icon icon-xs icon-white" data-toggle="tooltip" data-placement="top" title="Like us on Dribbble">
3454<i class="fab fa-dribbble">
3455</i>
3456</a>
3457</li>
3458</ul>
3459</div>
3460<div class="col-6 col-md-2 mb-5 mb-lg-0">
3461<h5>
3462Themesberg</h5>
3463<ul class="links-vertical">
3464<li>
3465<a target="_blank" href="https://themesberg.com/blog">
3466Blog</a>
3467</li>
3468<li>
3469<a target="_blank" href="https://themesberg.com/products">
3470Products</a>
3471</li>
3472<li>
3473<a target="_blank" href="https://themesberg.com/about">
3474About Us</a>
3475</li>
3476<li>
3477<a target="_blank" href="https://themesberg.com/contact">
3478Contact Us</a>
3479</li>
3480</ul>
3481</div>
3482<div class="col-6 col-md-2 mb-5 mb-lg-0">
3483<h5>
3484Other</h5>
3485<ul class="links-vertical">
3486<li>
3487<a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">
3488Docs <span class="badge badge-sm badge-secondary ml-2">
3489v3.0</span>
3490</a>
3491</li>
3492<li>
3493<a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog" target="_blank">
3494Changelog</a>
3495</li>
3496<li>
3497<a target="_blank" href="https://themesberg.com/licensing">
3498License</a>
3499</li>
3500<li>
3501<a target="_blank" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues">
3502Support</a>
3503</li>
3504</ul>
3505</div>
3506<div class="col-12 col-md-4 mb-5 mb-lg-0">
3507<h5>
3508Subscribe</h5>
3509<p class="text-muted">
3510Join our mailing list. We write rarely, but only the best content.</p>
3511<form action="#">
3512<div class="form-row mb-2">
3513<div class="col-12">
3514<input type="email" class="form-control mb-2" placeholder="Email Address" name="email" required="">
3515</div>
3516<div class="col-12">
3517<button type="submit" class="btn btn-tertiary shadow-soft btn-block" data-loading-text="Sending">
3518<span>
3519Subscribe</span>
3520</button>
3521</div>
3522</div>
3523</form>
3524<small class="text-muted">
3525We’ll never share your details. See our <a class="text-white" href="#">
3526Privacy Policy</a>
3527</small>
3528</div>
3529</div>
3530<hr class="my-5">
3531<div class="row">
3532<div class="col mb-md-0">
3533<a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center">
3534<img src="../../assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo">
3535</a>
3536<div class="d-flex text-center justify-content-center align-items-center">
3537<p class="font-weight-normal font-small mb-0">
3538Copyright © <a href="https://themesberg.com" target="_blank">
3539Themesberg</a>
3540 <span class="current-year">
35412020</span>
3542. All rights reserved.</p>
3543</div>
3544</div>
3545</div>
3546</div>
3547</footer>
3548<!-- Core -->
3549<script src="../../node_modules/jquery/dist/jquery.min.js">
3550</script>
3551<script src="../../node_modules/popper.js/dist/umd/popper.min.js">
3552</script>
3553<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js">
3554</script>
3555<script src="../../node_modules/headroom.js/dist/headroom.min.js">
3556</script>
3557<!-- Vendor JS -->
3558<script src="../../node_modules/onscreen/dist/on-screen.umd.min.js">
3559</script>
3560<script src="../../node_modules/nouislider/distribute/nouislider.min.js">
3561</script>
3562<script src="../../node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js">
3563</script>
3564<script src="../../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js">
3565</script>
3566<script src="../../node_modules/waypoints/lib/jquery.waypoints.min.js">
3567</script>
3568<script src="../../node_modules/jarallax/dist/jarallax.min.js">
3569</script>
3570<script src="../../node_modules/smooth-scroll/dist/smooth-scroll.polyfills.min.js">
3571</script>
3572<script src="../../node_modules/vivus/dist/vivus.min.js">
3573</script>
3574<script src="../../node_modules/vivus/src/pathformer.js">
3575</script>
3576<!-- Place this tag in your head or just before your close body tag. -->
3577<script async defer="defer" src="https://buttons.github.io/buttons.js">
3578</script>
3579<!-- pixel JS -->
3580<script src="../../assets/js/pixel.js">
3581</script>
3582<script>
3583$toggleTransitions = $('#toggleTransitions');
3584 $buttonOverlay = $('.btn-loading-overlay');
3585
3586 $toggleTransitions.on('change', function() {
3587 if ($(this).is(':checked')) {
3588 $buttonOverlay.addClass('btn-loading');
3589 $buttonOverlay.attr('disabled', true);
3590 } else {
3591 $buttonOverlay.removeClass('btn-loading');
3592 $buttonOverlay.attr('disabled', false);
3593 }
3594 });</script>
3595</body>
3596</html>