CINXE.COM

<!DOCTYPE html><html lang="zxx"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Pixel Pro - Single Article</title><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="title" content="Pixel Pro - Single Article"><meta name="author" content="Themesberg"><meta name="description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta name="keywords" content="bootstrap, bootstrap ui kit, premium Bootstrap 5 UI Kit, bootstrap dashboard, bootstrap messaging, bootstrap billing, bootstrap item list, bootstrap charts, bootstrap timelines, bootstrap cards, bootstrap pricing cards, bootstrap profile cards, bootstrap 5, gulp, npm, sass, javascript, jquery, themesberg, Bootstrap 5 UI Kit theme, Bootstrap 5 UI Kit, premium bootstrap ui kit, bootstrap design system, themesberg ui kit, pixel ui kit, pixel pro ui kit"><link rel="canonical" href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"><meta property="og:type" content="website"><meta property="og:url" content="https://demo.themesberg.com/pixel-pro"><meta property="og:title" content="Pixel Pro - Single Article"><meta property="og:description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://demo.themesberg.com/pixel-pro"><meta property="twitter:title" content="Pixel Pro - Single Article"><meta property="twitter:description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta property="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"><link rel="apple-touch-icon" sizes="120x120" href="../../assets/img/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="../../assets/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="../../assets/img/favicon/favicon-16x16.png"><link rel="manifest" href="../../assets/img/favicon/site.webmanifest"><link rel="mask-icon" href="../../assets/img/favicon/safari-pinned-tab.svg" color="#ffffff"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><link type="text/css" href="../../vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="../../vendor/@glidejs/glide/dist/css/glide.core.min.css"><link rel="stylesheet" href="../../vendor/@glidejs/glide/dist/css/glide.theme.min.css"><link type="text/css" href="../../css/pixel.css" rel="stylesheet"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-6"></script><script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-6');</script><script>(function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-THQTXJ7');</script></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THQTXJ7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><header class="header-global"><nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark navbar-theme-primary"><div class="container position-relative"><a class="navbar-brand me-lg-5" href="../../index.html"><img class="navbar-brand-dark" src="../../assets/img/brand/light.svg" alt="Logo light"> <img class="navbar-brand-light" src="../../assets/img/brand/dark.svg" alt="Logo dark"></a><div class="navbar-collapse collapse me-auto" id="navbar_global"><div class="navbar-collapse-header"><div class="row"><div class="col-6 collapse-brand"><a href="../../index.html"><img src="../../assets/img/brand/dark.svg" alt="Themesberg logo"></a></div><div class="col-6 collapse-close"><a href="#navbar_global" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a></div></div></div><ul class="navbar-nav navbar-nav-hover align-items-lg-center"><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="frontPagesDropdown" aria-expanded="false" data-bs-toggle="dropdown">Pages <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu px-0 py-2 p-lg-4" aria-labelledby="frontPagesDropdown"><div class="row"><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">Main pages</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/about.html">About</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/pricing.html">Pricing</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/team.html">Team</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/services.html">Services</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/profile.html">Profile</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/contact.html">Contact</a></li></ul><h6 class="d-block text-primary">Legal</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/legal.html">Legal center</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/terms.html">Terms & agreement</a></li></ul><h6 class="d-block text-primary">Career</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/careers.html">Careers</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/career-single.html">Career Single</a></li></ul></div><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">Landings</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/landing-app.html">App</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/landing-crypto.html">Crypto</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/landing-freelancer.html">Freelancer</a></li></ul><h6 class="d-block mb-3 text-primary">Support</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/support.html">Support center</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/support-topic.html">Support topic</a></li></ul><h6 class="d-block mb-3 text-primary">Blog</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/blog.html">Blog</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/blog-post.html">Blog post</a></li></ul></div><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">User</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/sign-in.html">Sign in</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/sign-up.html">Sign up</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/forgot-password.html">Forgot password</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/reset-password.html">Reset password</a></li></ul><h6 class="d-block mb-3 text-primary">Special</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/404.html">404 Not Found</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/500.html">500 Server Error</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/maintenance.html">Maintenance</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/coming-soon.html">Coming soon</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/pages/blank.html">Blank page</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="dashboardDropdown" aria-expanded="false" data-bs-toggle="dropdown">Dashboard <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu-sm px-0 py-2 p-lg-4" aria-labelledby="dashboardDropdown"><div class="row"><div class="col-6"><h6 class="d-block mb-3 text-primary">User dashboard</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/account.html">My account</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/settings.html">Settings</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/security.html">Security</a></li></ul><h6 class="d-block mb-3 text-primary">Items</h6><ul class="list-style-none"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/my-items.html">My items</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/edit-item.html">Edit item</a></li></ul></div><div class="col-6"><h6 class="d-block mb-3 text-primary">Messaging</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/messages.html">Messages</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/single-message.html">Chat</a></li></ul><h6 class="d-block mb-3 text-primary">Billing</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/billing.html">Billing details</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="../../html/dashboard/invoice.html">Invoice</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="componentsDropdown" aria-expanded="false" data-bs-toggle="dropdown">Components <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu-md p-0" aria-labelledby="componentsDropdown"><div class="row g-0"><div class="col-lg-6 bg-dark d-none d-lg-block me-0 me-3"><div class="px-0 py-3 text-center"><img src="../../assets/img/megamenu_image.png" alt="Pixel Components"></div><div class="z-2 pb-3 text-center"><a href="../../html/components/all.html" class="btn btn-outline-white animate-up-2 mb-2 mb-sm-0 me-3"><span class="me-1"><span class="fas fa-th-large"></span></span> All components </a><a href="../../html/sections/all-sections.html" class="btn btn-tertiary animate-up-2 mb-2 mb-sm-0"><span class="me-1"><span class="fas fa-pager"></span></span> All sections</a></div></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="../../html/components/accordions.html">Accordions</a></li><li><a class="dropdown-item" href="../../html/components/alerts.html">Alerts</a></li><li><a class="dropdown-item" href="../../html/components/badges.html">Badges</a></li><li><a class="dropdown-item" href="../../html/components/cards.html">Cards</a></li><li><a class="dropdown-item" href="../../html/components/charts.html">Charts</a></li><li><a class="dropdown-item" href="../../html/components/bootstrap-carousels.html">Bootstrap Carousels</a></li><li><a class="dropdown-item" href="../../html/components/breadcrumbs.html">Breadcrumbs</a></li><li><a class="dropdown-item" href="../../html/components/buttons.html">Buttons</a></li><li><a class="dropdown-item" href="../../html/components/counters.html">Counters</a></li></ul></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="../../html/components/dropdowns.html">Dropdowns</a></li><li><a class="dropdown-item" href="../../html/components/e-commerce.html">E-commerce</a></li><li><a class="dropdown-item" href="../../html/components/forms.html">Forms</a></li><li><a class="dropdown-item" href="../../html/components/icon-boxes.html">Icon Boxes</a></li><li><a class="dropdown-item" href="../../html/components/modals.html">Modals</a></li><li><a class="dropdown-item" href="../../html/components/navs.html">Navs</a></li><li><a class="dropdown-item" href="../../html/components/glidejs-carousels.html">GlideJS Carousels</a></li><li><a class="dropdown-item" href="../../html/components/pagination.html">Pagination</a></li><li><a class="dropdown-item" href="../../html/components/popovers.html">Popovers</a></li></ul></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="../../html/components/progress-bars.html">Progress Bars</a></li><li><a class="dropdown-item" href="../../html/components/steps.html">Steps</a></li><li><a class="dropdown-item" href="../../html/components/tables.html">Tables</a></li><li><a class="dropdown-item" href="../../html/components/tabs.html">Tabs</a></li><li><a class="dropdown-item" href="../../html/components/toasts.html">Toasts</a></li><li><a class="dropdown-item" href="../../html/components/timelines.html">Timelines</a></li><li><a class="dropdown-item" href="../../html/components/tooltips.html">Tooltips</a></li><li><a class="dropdown-item" href="../../html/components/typography.html">Typography</a></li><li><a class="dropdown-item" href="../../html/components/widgets.html">Widgets</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" id="supportDropdown" aria-expanded="false">Support <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-menu-lg" aria-labelledby="supportDropdown"><div class="col-auto px-0"><div class="list-group list-group-flush"><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm"><span class="fas fa-file-alt"></span></span><div class="ms-4"><span class="d-block font-small fw-bold mb-0">Documentation<span class="badge badge-sm badge-secondary ms-2">v3.1</span></span> <span class="small">Examples and guides</span></div></a><a href="https://themesberg.com/contact" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm"><span class="fas fa-microphone-alt"></span></span><div class="ms-4"><span class="d-block font-small fw-bold mb-0">Support</span> <span class="small">Need help? Ask us!</span></div></a></div></div></div></li></ul></div><div class="d-flex align-items-center"><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" class="btn btn-outline-gray-100 d-none d-lg-inline me-md-3"><span class="fas fa-book me-2"></span> Docs v5.4</a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" target="_blank" class="btn btn-tertiary"><span class="fas fa-shopping-cart me-2"></span> Buy now</a> <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></div></div></nav></header><main><div class="preloader bg-dark flex-column justify-content-center align-items-center"><svg id="loader-logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 64 78.4"><path fill="#fff" d="M10,0h1.2V11.2H0V10A10,10,0,0,1,10,0Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40" y="17.6" width="0" height="25.6"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="23" y="35.2" width="0" height="25.6"/><path fill="#fff" d="M52.8,35.2H64V53.8a7,7,0,0,1-7,7H52.8V35.2Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="52.8" width="0" height="25.6"/><path fill="#fff" d="M52.8,0H57a7,7,0,0,1,7,7h0v4.2H52.8V0Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="57.8" y="17.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="35.2" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40.2" y="49.6" width="0" height="11.2"/><path fill="#fff" d="M17.6,67.2H28.8v1.2a10,10,0,0,1-10,10H17.6V67.2Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="28.8" x="31.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" x="14" stroke-width="28.8" y="17.6" width="0" height="11.2"/></svg></div><section class="section-header pb-5 pb-sm-7 bg-primary text-white"><div class="container"><div class="row justify-content-center"><div class="col-12 col-lg-10 text-center"><div class="mb-4"><a href="./blog.html" class="badge bg-success text-uppercase me-2 px-3">Seo</a> <a href="#" class="badge bg-warning text-uppercase px-3">Marketing</a></div><h1 class="display-3 mb-4 px-lg-5">90% of content gets no traffic from Google. How to improve your organic search traffic</h1><div class="post-meta"><span class="fw-bold me-3">James Curran</span> <span class="post-date me-3">January 31, 2021</span> <span class="fw-bold">7 min read</span></div></div></div></div></section><div class="section section-sm bg-white pt-5 pt-lg-6 text-black"><article class="container"><div class="row justify-content-center"><div class="col-12 col-lg-8"><p>Adding a dark mode is basically adding a theme. The principles are the same for adding a light mode to a dark website or alternative styling based on user-defined variables, the time of year or holidays.</p><p>I added theming with a mix of and CSS. In this post I鈥檒l go step by step into the details of how I did it and what I learned.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias expedita earum modi sint voluptatum nemo assumenda explicabo laboriosam unde excepturi, necessitatibus consequatur quo! Quis impedit excepturi ut, alias omnis harum?</p><p><img class="rounded" src="../../assets/img/blog/image-2.jpg" alt="Themesberg office"></p><h2>Setup</h2><p>The themes are <a href="#">activated by CSS classes</a> on the root element. When the page is loaded, I want to apply the theme that most likely suits the visitor (you!) best. After all, most people don鈥檛 like configuring websites before they can read a blog post, so the the whole theming feature would likely remain unused otherwise. So I have to make a guess about what the visitor wants and expects. I do that in this order:</p><ol><li>I assume people don鈥檛 want the theme to change when they navigate between pages. So if the page loaded isn鈥檛 the first page they visit, I want to use the theme that was used before.</li><li>If it鈥檚 the first page they view on my site, their browser may be able to tell their preference.</li><li>If no preference is available, we can base the choice based on whether it鈥檚 day or night.</li></ol><p>Every time a page is loaded, in the current or a new tab, it checks if a theme was set previously. Because the preference for a light or dark theme can change during the day, with every change, I add a time stamp to the saved setting. Only when the state was saved less than two hours ago, it鈥檚 applied:</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque distinctio nemo tempora similique necessitatibus asperiores inventore ipsum, nostrum velit, quasi vitae natus numquam veritatis nobis, reiciendis deleniti facere molestias a.</p><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6><p class="my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit perferendis labore vel, necessitatibus laboriosam fugit inventore ad odio tenetur vitae veritatis, earum numquam consectetur voluptatem illum, sequi asperiores commodi?</p><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li></ul><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit corrupti dolorem at iste perferendis! Modi praesentium vel, rem aliquid illo, nostrum asperiores dolorem corrupti odio tempora impedit deleniti eius voluptatibus.</p></div></div><div class="row justify-content-sm-center align-items-center py-3 mt-3"><div class="col-12 col-lg-8"><div class="row"><div class="col-9 col-md-6"><h6 class="fw-bolder d-inline mb-0 me-3">Share:</h6><button class="btn btn-sm me-2 btn-icon-only btn-pill btn-twitter d-inline text-white" aria-label="twitter social link"><span class="fab fa-twitter"></span></button> <button class="btn btn-sm me-2 btn-icon-only btn-pill btn-facebook d-inline" aria-label="facebook social link"><span class="fab fa-facebook-f"></span></button> <button class="btn btn-sm btn-icon-only btn-pill bg-orange d-inline text-white" aria-label="reddit social link"><span class="fab fa-reddit-alien"></span></button></div><div class="col-3 col-md-6 text-right"><span class="far fa-bookmark text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Bookmark story" data-original-title="Bookmark story"></span></div></div></div></div></article></div><div class="section section-md bg-white text-black pt-0 line-bottom-light"><div class="container"><div class="row justify-content-center"><div class="col-12 col-lg-8"><div><label class="h5 mb-4" for="exampleFormControlTextarea1"><span class="badge badge-md bg-primary text-uppercase me-2">23</span> Comments</label> <textarea class="form-control border border-gray-300-gray" id="exampleFormControlTextarea1" placeholder="Add your comment" rows="6" data-bind-characters-target="#charactersRemaining" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light text-dark"><span id="charactersRemaining"></span> characters remaining</small> <button class="btn btn-primary animate-up-2">Send</button></div><div class="mt-5"><div class="card bg-gray-200 border-gray-300 rounded p-4 mb-4"><div class="d-flex justify-content-between mb-4"><span class="font-small"><a href="#"><img class="avatar-sm img-fluid rounded-circle me-2" src="../../assets/img/team/profile-picture-1.jpg" alt="avatar"> <span class="fw-bold">John Doe</span> </a><span class="ms-2">2 min ago</span></span><div><button class="btn btn-link text-danger" aria-label="report button"><span class="far fa-flag"></span></button></div></div><p class="m-0">I really like that the Pixel uses a lot of Bootstrap 4's classes to position elements across the website. I also like the fact that we can get a version of the code without Sass if needed.<br><br>When is the next product coming? :)</p><div class="mt-4 mb-3 d-flex justify-content-between"><div><span class="far fa-thumbs-up text-action text-success me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Like comment" data-original-title="Like comment"></span> <span class="far fa-thumbs-down text-action text-danger me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Dislike comment" data-original-title="Dislike comment"></span> <span class="font-small fw-light">4 likes</span></div><a class="text-action fw-light font-small" data-bs-toggle="collapse" role="button" href="#replyContainer1" aria-expanded="false" aria-controls="replyContainer1"><span class="fas fa-reply me-2"></span> Reply</a></div><div class="collapse" id="replyContainer1"><label class="mb-4 d-none" for="exampleFormControlTextarea10">Replay</label> <textarea class="form-control border" id="exampleFormControlTextarea10" placeholder="Reply to John Doe" rows="6" data-bind-characters-target="#charactersRemainingReply" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light"><span id="charactersRemainingReply"></span> characters remaining</small> <button class="btn btn-primary btn-sm animate-up-2">Send</button></div></div></div><div class="card bg-gray-200 border-gray-300 rounded p-4 ms-5 mb-4"><div class="d-flex justify-content-between mb-4"><span class="font-small"><a href="#"><img class="avatar-sm img-fluid rounded-circle me-2" src="../../assets/img/team/profile-picture-2.jpg" alt="Bonnie avatar"> <span class="fw-bold">Bonnie Green</span> </a><span class="ms-2">2 min ago</span></span><div><button class="btn btn-link text-danger" aria-label="report button"><span class="far fa-flag"></span></button></div></div><p class="m-0">Hi John Doe,<br><br>We're happy to hear you like our product. A new one will come soon enough!</p><div class="mt-4 mb-3 d-flex justify-content-between"><div><span class="far fa-thumbs-up text-action text-success me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Like comment" data-original-title="Like comment"></span> <span class="far fa-thumbs-down text-action text-danger me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Dislike comment" data-original-title="Dislike comment"></span> <span class="font-small fw-light">2 likes</span></div><a class="text-action fw-light font-small" data-bs-toggle="collapse" role="button" href="#replyContainer2" aria-expanded="false" aria-controls="replyContainer2"><span class="fas fa-reply me-2"></span> Reply</a></div><div class="collapse" id="replyContainer2"><label class="mb-4 d-none" for="exampleFormControlTextarea11">Replay</label> <textarea class="form-control border" id="exampleFormControlTextarea11" placeholder="Reply to John Doe" rows="6" data-bind-characters-target="#charactersRemainingReply2" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light"><span id="charactersRemainingReply2"></span> characters remaining</small> <button class="btn btn-primary btn-sm animate-up-2">Send</button></div></div></div><div class="card bg-gray-200 border-gray-300 rounded p-4 mb-4"><div class="d-flex justify-content-between mb-4"><span class="font-small"><a href="#"><img class="avatar-sm img-fluid rounded-circle me-2" src="../../assets/img/team/profile-picture-3.jpg" alt="James avatar"> <span class="fw-bold">James Curran</span> </a><span class="ms-2">2 min ago</span></span><div><button class="btn btn-link text-danger" aria-label="report button"><span class="far fa-flag"></span></button></div></div><p class="m-0">Hey there! We want to say that <span class="text-tertiary">you're awesome</span> and we think you'll build great websites! Why not use Pixel to make things easier?</p><div class="mt-4 mb-3 d-flex justify-content-between"><div><span class="far fa-thumbs-up text-action text-success me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Like comment" data-original-title="Like comment"></span> <span class="far fa-thumbs-down text-action text-danger me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Dislike comment" data-original-title="Dislike comment"></span> <span class="font-small fw-light">4 likes</span></div><a class="text-action fw-light font-small" data-bs-toggle="collapse" role="button" href="#replyContainer3" aria-expanded="false" aria-controls="replyContainer3"><span class="fas fa-reply me-2"></span> Reply</a></div><div class="collapse" id="replyContainer3"><label class="mb-4 d-none" for="exampleFormControlTextarea12">Replay</label> <textarea class="form-control border" id="exampleFormControlTextarea12" placeholder="Reply to John Doe" rows="6" data-bind-characters-target="#charactersRemainingReply3" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light"><span id="charactersRemainingReply3"></span> characters remaining</small> <button class="btn btn-primary btn-sm animate-up-2">Send</button></div></div></div><div id="extraContent" style="display: none;"><div class="card bg-gray-200 border-gray-300 p-4 mb-4"><div class="d-flex justify-content-between mb-4"><span class="font-small"><a href="#"><img class="avatar-sm img-fluid rounded-circle me-2" src="../../assets/img/team/profile-picture-2.jpg" alt="Neil avatar"> <span class="fw-bold">Neil Sims</span> </a><span class="ms-2">2 min ago</span></span><div><button class="btn btn-link text-danger" aria-label="report button"><span class="far fa-flag"></span></button></div></div><p class="m-0">I really like that the Pixel uses a lot of Bootstrap 4's classes to position elements across the website. I also like the fact that we can get a version of the code without Sass if needed.<br><br>When is the next product coming? :)</p><div class="mt-4 mb-3 d-flex justify-content-between"><div><span class="far fa-thumbs-up text-action text-success me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Like comment" data-original-title="Like comment"></span> <span class="far fa-thumbs-down text-action text-danger me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Dislike comment" data-original-title="Dislike comment"></span> <span class="font-small fw-light">4 likes</span></div><a class="text-action fw-light font-small" data-bs-toggle="collapse" role="button" href="#replyContainer4" aria-expanded="false" aria-controls="replyContainer4"><span class="fas fa-reply me-2"></span> Reply</a></div><div class="collapse" id="replyContainer4"><label class="mb-4 d-none" for="exampleFormControlTextarea13">Replay</label> <textarea class="form-control border" id="exampleFormControlTextarea13" placeholder="Reply to John Doe" rows="6" data-bind-characters-target="#charactersRemainingReply4" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light"><span id="charactersRemainingReply4"></span> characters remaining</small> <button class="btn btn-primary btn-sm animate-up-2">Send</button></div></div></div><div class="card bg-gray-200 rounded border-gray-300 p-4 ms-5 mb-4"><div class="d-flex justify-content-between mb-4"><span class="font-small"><a href="#"><img class="avatar-sm img-fluid rounded-circle me-2" src="../../assets/img/team/profile-picture-5.jpg" alt="Jose avatar"> <span class="fw-bold">Jose Leos</span> </a><span class="ms-2">2 min ago</span></span><div><button class="btn btn-link text-danger" aria-label="report button"><span class="far fa-flag"></span></button></div></div><p class="m-0">Hi John Doe,<br><br>We're happy to hear you like our product. A new one will come soon enough!</p><div class="mt-4 mb-3 d-flex justify-content-between"><div><span class="far fa-thumbs-up text-action text-success me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Like comment" data-original-title="Like comment"></span> <span class="far fa-thumbs-down text-action text-danger me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Dislike comment" data-original-title="Dislike comment"></span> <span class="font-small fw-light">2 likes</span></div><a class="text-action fw-light font-small" data-bs-toggle="collapse" role="button" href="#replyContainer5" aria-expanded="false" aria-controls="replyContainer5"><span class="fas fa-reply me-2"></span> Reply</a></div><div class="collapse" id="replyContainer5"><label class="mb-4 d-none" for="exampleFormControlTextarea14">Replay</label> <textarea class="form-control border" id="exampleFormControlTextarea14" placeholder="Reply to John Doe" rows="6" data-bind-characters-target="#charactersRemainingReply5" maxlength="1000"></textarea><div class="d-flex justify-content-between mt-3"><small class="fw-light"><span id="charactersRemainingReply5"></span> characters remaining</small> <button class="btn btn-primary btn-sm animate-up-2">Send</button></div></div></div></div><div class="mt-5 text-center"><button id="loadOnClick" class="btn btn-primary btn-loading-overlay me-2 mb-2"><span class="spinner"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </span><span class="ms-1 btn-inner-text">Load more comments</span></button><p id="allLoadedText" style="display: none;">That's all, Sparky!</p></div></div></div></div></div></div></div></main><footer class="footer pt-6 pb-5 bg-dark text-white"><div class="container"><div class="row"><div class="col-md-4"><img class="navbar-brand-dark mb-4" height="35" src="../../assets/img/brand/light.svg" alt="Logo light"><p>Pixel Pro is a premium Bootstrap 5 UI Kit that will help you prototype and design beautiful, creative and modern websites.</p><ul class="social-buttons mb-5 mb-lg-0"><li><a href="https://twitter.com/themesberg" aria-label="twitter social link" class="icon-white me-2"><span class="fab fa-twitter"></span></a></li><li><a href="https://www.facebook.com/themesberg/" class="icon-white me-2" aria-label="facebook social link"><span class="fab fa-facebook"></span></a></li><li><a href="https://github.com/themesberg" aria-label="github social link" class="icon-white me-2"><span class="fab fa-github"></span></a></li><li><a href="https://dribbble.com/themesberg" class="icon-white" aria-label="dribbble social link"><span class="fab fa-dribbble"></span></a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><span class="h5">Themesberg</span><ul class="footer-links mt-2"><li><a target="_blank" href="https://themesberg.com/blog">Blog</a></li><li><a target="_blank" href="https://themesberg.com/themes">Products</a></li><li><a target="_blank" href="https://themesberg.com/about">About Us</a></li><li><a target="_blank" href="https://themesberg.com/contact">Contact Us</a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><span class="h5">Other</span><ul class="footer-links mt-2"><li><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank">Docs <span class="badge badge-sm bg-success ms-2">v5.4</span></a></li><li><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog/" target="_blank">Changelog</a></li><li><a target="_blank" href="https://themesberg.com/licensing">License</a></li><li><a target="_blank" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues">Support</a></li></ul></div><div class="col-12 col-md-4 mb-5 mb-lg-0"><span class="h5">Subscribe</span><p class="text-muted font-small mt-2">Join our mailing list. We write rarely, but only the best content.</p><form action="#"><div class="form-row mb-2"><div class="col-12"><label class="h6 fw-normal text-muted" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control mb-2" placeholder="example@company.com" name="email" aria-label="Subscribe form" id="exampleInputEmail3" required></div><div class="col-12 d-grid"><button type="submit" class="btn btn-tertiary" data-loading-text="Sending"><span>Subscribe</span></button></div></div></form><p class="text-muted font-small m-0">We鈥檒l never share your details. See our <a class="text-white" href="#">Privacy Policy</a></p></div></div><hr class="bg-secondary my-3 my-lg-5"><div class="row"><div class="col mb-md-0"><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center mb-3"><img src="../../assets/img/themesberg.svg" height="30" class="me-2" alt="Themesberg Logo"><p class="text-white fw-bold footer-logo-text m-0">Themesberg</p></a><div class="d-flex text-center justify-content-center align-items-center" role="contentinfo"><p class="fw-normal font-small mb-0">Copyright 漏 Themesberg 2019-<span class="current-year">2021</span>. All rights reserved.</p></div></div></div></div></footer><script src="../../vendor/@popperjs/core/dist/umd/popper.min.js"></script><script src="../../vendor/bootstrap/dist/js/bootstrap.min.js"></script><script src="../../vendor/headroom.js/dist/headroom.min.js"></script><script src="../../vendor/onscreen/dist/on-screen.umd.min.js"></script><script src="../../vendor/nouislider/distribute/nouislider.min.js"></script><script src="../../vendor/jarallax/dist/jarallax.min.js"></script><script src="../../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script><script src="../../vendor/vivus/dist/vivus.min.js"></script><script src="../../vendor/chartist/dist/chartist.min.js"></script><script src="../../vendor/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js"></script><script src="../../vendor/@glidejs/glide/dist/glide.min.js"></script><script src="../../vendor/countup.js/dist/countUp.umd.js"></script><script src="../../vendor/vanillajs-datepicker/dist/js/datepicker.min.js"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script src="../../assets/js/pixel.js"></script></body></html>