Stats

Component #1

The powerful and flexible theme for all kinds of businesses

Whether you're creating a subscription service, an on-demand marketplace, an e-commerce store, or a portfolio showcase, Front's unmatched functionality help you create the best possible product for your users.

300 +

Build a professional website with corporate and SaaS based components.

70 +

Take advantage of more than 70 pages designed with mobile-first in mind.

95 %

of our customers rated 5-star our themes over 5 years.

20 +

We continually deploy improvements to Front, which handles more than 3.5k users.

                    
                      <!-- Features Section -->
                      <div class="container space-2">
                        <div class="row justify-content-lg-between">
                          <div class="col-lg-5 order-lg-2 pl-lg-0">
                            <div class="bg-img-hero h-100 min-h-450rem rounded" style="background-image: url(../../assets/img/900x900/img19.jpg);"></div>
                          </div>

                          <div class="col-lg-6 order-lg-1">
                            <div class="pt-8 pb-lg-8">
                              <!-- Title -->
                              <div class="mb-5 mb-md-7">
                                <h2 class="mb-3">The powerful and flexible theme for all kinds of businesses</h2>
                                <p>Whether you're creating a subscription service, an on-demand marketplace, an e-commerce store, or a portfolio showcase, Front's unmatched functionality help you create the best possible product for your users.</p>
                              </div>
                              <!-- End Title -->

                              <div class="row">
                                <div class="col-6 mb-3 mb-md-5">
                                  <div class="pr-lg-4">
                                    <span class="js-counter h2 text-primary">300</span>
                                    <span class="h2 text-primary">+</span>
                                    <p>Build a professional website with corporate and SaaS based components.</p>
                                  </div>
                                </div>

                                <div class="col-6 mb-3 mb-md-5">
                                  <div class="pr-lg-4">
                                    <span class="js-counter h2 text-primary">70</span>
                                    <span class="h2 text-primary">+</span>
                                    <p>Take advantage of more than 70 pages designed with mobile-first in mind.</p>
                                  </div>
                                </div>

                                <div class="col-6">
                                  <div class="pr-lg-4">
                                    <span class="js-counter h2 text-primary">95</span>
                                    <span class="h2 text-primary">%</span>
                                    <p>of our customers rated 5-star our themes over 5 years.</p>
                                  </div>
                                </div>

                                <div class="col-6">
                                  <div class="pr-lg-4">
                                    <span class="js-counter h2 text-primary">20</span>
                                    <span class="h2 text-primary">+</span>
                                    <p>We continually deploy improvements to Front, which handles more than 3.5k users.</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Features Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/hs-counter/dist/hs-counter.min.js"></script>
                      <script src="../../assets/vendor/appear.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of counter
                          $('.js-counter').each(function() {
                            var counter = new HSCounter($(this)).init();
                          });
                        });
                      </script>
                    
                  

Component #2

4.83 out of 5 starts from 53 reviews

Over 500 support questions have been closed

3,700 Front copies have been purchased

                    
                      <!-- Stats Section -->
                      <div class="container space-2">
                        <div class="row justify-content-lg-center">
                          <div class="col-md-4 mb-7 mb-lg-0">
                            <!-- Stats -->
                            <div class="text-center px-md-3 px-lg-7">
                              <figure class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 71.7 64" width="71" height="64">
                                  <path fill="#FFC107" d="M36.8,14.6L42,25.3c0,0.2,0.2,0.2,0.3,0.3L54,27.2c0.3,0,0.5,0.5,0.3,0.8l-8.5,8.2c-0.2,0.2-0.2,0.3-0.2,0.5
                                    l2,11.7c0,0.3-0.3,0.7-0.7,0.5l-10.5-5.6c-0.2,0-0.3,0-0.5,0l-10.5,5.6c-0.3,0.2-0.8-0.2-0.7-0.5l2-11.7c0-0.2,0-0.3-0.2-0.5
                                    L18,28.1c-0.3-0.3-0.2-0.8,0.3-0.8L30,25.6c0.2,0,0.3-0.2,0.3-0.3l5.3-10.7C36.1,14.2,36.6,14.2,36.8,14.6z"/>
                                  <path opacity=".25" fill="#FFC107" d="M56,5.9l1.5,2.8c0,0,0,0,0.2,0l3.1,0.5c0.2,0,0.2,0.2,0,0.2l-2.3,2.3c0,0,0,0,0,0.2l0.5,3.1
                                    c0,0.2-0.2,0.2-0.2,0.2L56,13.6h-0.2L53,15.1c-0.2,0-0.2,0-0.2-0.2l0.5-3.1v-0.2l-2.3-2.3V9.2l3.1-0.5c0,0,0,0,0.2,0l1.5-2.8
                                    C55.8,5.7,55.8,5.7,56,5.9z"/>
                                  <path opacity=".25" fill="#FFC107" d="M12.3,0.3l1.3,2.8c0,0,0,0,0.2,0l3,0.5c0.2,0,0.2,0.2,0,0.2l-2.1,2.1c0,0,0,0,0,0.2l0.5,3
                                    c0,0.2-0.2,0.2-0.2,0.2l-2.6-1.5c0,0,0,0-0.2,0L9.5,9.2c-0.2,0-0.2,0-0.2-0.2l0.5-3c0,0,0,0,0-0.2L7.5,3.7V3.6l3-0.5c0,0,0,0,0.2,0
                                    l1.3-2.8C12.1,0.3,12.3,0.3,12.3,0.3z"/>
                                  <path opacity=".25" fill="#FFC107" d="M13.9,49.9l1.5,2.8c0,0,0,0,0.2,0l3.1,0.5c0.2,0,0.2,0.2,0,0.2l-2.3,2.3c0,0,0,0,0,0.2l0.5,3.1
                                    c0,0.2-0.2,0.2-0.2,0.2l-2.8-1.5h-0.2L11,59.1c-0.2,0-0.2,0-0.2-0.2l0.5-3.1v-0.2L9,53.4v-0.2l3.1-0.5c0,0,0,0,0.2,0l1.3-2.8
                                    C13.8,49.8,13.9,49.8,13.9,49.9z"/>
                                  <path opacity=".25" fill="#FFC107" d="M60.8,53.5l1.6,3.1c0,0,0,0,0.2,0l3.5,0.5c0.2,0,0.2,0.2,0,0.3l-2.5,2.5c0,0,0,0,0,0.2l0.7,3.5
                                    c0,0.2-0.2,0.2-0.2,0.2l-3.1-1.6h-0.2l-3.1,1.6c-0.2,0-0.2,0-0.2-0.2l0.7-3.5v-0.2l-2.5-2.5c-0.2-0.2,0-0.2,0-0.3l3.5-0.5h0.2
                                    l1.6-3.1C60.4,53.4,60.6,53.4,60.8,53.5z"/>
                                </svg>
                              </figure>
                              <p class="mb-0"><span class="text-dark font-weight-bold">4.83 out of 5 starts</span> from 53 reviews</p>
                            </div>
                            <!-- End Stats -->
                          </div>

                          <div class="col-md-4 mb-7 mb-lg-0">
                            <!-- Stats -->
                            <div class="text-center column-divider-md column-divider-20deg px-md-3 px-lg-7">
                              <figure class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 71.7 64" width="71" height="64">
                                  <defs>
                                    <circle id="SVGID_1_" cx="50.9" cy="43.1" r="18.9"/>
                                  </defs>
                                  <clipPath id="SVGID_2_">
                                    <use xlink:href="#SVGID_1_"/>
                                  </clipPath>
                                  <g transform="matrix(1 0 0 1 0 1.907349e-06)" style="clip-path:url(#SVGID_2_);">
                                    <image width="100" height="100" xlink:href="../../assets/img/100x100/img10.jpg" transform="matrix(0.36 0 0 0.36 32.8571 25.1429)"></image>
                                  </g>
                                  <use xlink:href="#SVGID_1_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
                                  <defs>
                                    <circle id="SVGID_3_" cx="34.6" cy="20.9" r="18.9"/>
                                  </defs>
                                  <clipPath id="SVGID_4_">
                                    <use xlink:href="#SVGID_3_"/>
                                  </clipPath>
                                  <g style="clip-path:url(#SVGID_4_);">
                                    <image width="100" height="100" xlink:href="../../assets/img/100x100/img3.jpg" transform="matrix(0.36 0 0 0.36 16.5714 2.8571)"></image>
                                  </g>
                                  <use xlink:href="#SVGID_3_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
                                  <defs>
                                    <circle id="SVGID_5_" cx="20.9" cy="43.1" r="18.9"/>
                                  </defs>
                                  <clipPath id="SVGID_6_">
                                    <use xlink:href="#SVGID_5_"/>
                                  </clipPath>
                                  <g style="clip-path:url(#SVGID_6_);">
                                    <image width="100" height="100" xlink:href="../../assets/img/100x100/img2.jpg" transform="matrix(0.3771 0 0 0.3771 2 24.2857)"></image>
                                  </g>
                                  <use xlink:href="#SVGID_5_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
                                </svg>
                              </figure>
                              <p class=" mb-0">Over <span class="text-dark font-weight-bold">500</span> support questions have been closed</p>
                            </div>
                            <!-- End Stats -->
                          </div>

                          <div class="col-md-4">
                            <!-- Stats -->
                            <div class="text-center column-divider-md column-divider-20deg px-md-3 px-lg-7">
                              <figure class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="71" height="64" viewBox="0 0 71.7 64">
                                  <path fill="none" stroke="#21325b" stroke-width="2" d="M47.9,1.3H20.1c-2,0-3.5,1.5-3.5,3.5v51.4c0,2,1.5,3.5,3.5,3.5h36.5c2,0,3.5-1.5,3.5-3.5v-8.6V21.2v-7.5
                                    L47.9,1.3z"/>
                                  <path fill="#21325b" d="M49.1,14.7c-1.1,0-1.8-0.9-1.8-1.8V2L60,14.7H49.1z"/>
                                  <line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="21" x2="28" y2="21"/>
                                  <line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="27.9" x2="28" y2="27.9"/>
                                  <line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="34.8" x2="28" y2="34.8"/>
                                  <line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="42" x2="28" y2="42"/>
                                  <path opacity=".2" fill="#21325b" d="M17.1,56V10.2c0-1.4-1.1-2.5-2.5-2.5h-0.5c-1.4,0-2.5,1.1-2.5,2.5v51.1c0,1.4,1.1,2.5,2.5,2.5h2.9h34.7
                                    c1.4,0,2.5-1.1,2.5-2.5v-0.5c0-1.4-1.1-2.5-2.5-2.5H19.5C18.1,58.4,17.1,57.4,17.1,56z"/>
                                </svg>
                              </figure>
                              <p class="mb-0"><span class="text-dark font-weight-bold">3,700</span> Front copies have been purchased</p>
                            </div>
                            <!-- End Stats -->
                          </div>
                        </div>
                      </div>
                      <!-- End Stats Section -->
                    
                  

Component #3

The most effective way to track your revenues

Prefer to start with the Trial version? Go here
                    
                      <!-- Stats Progress Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <h2>The most effective way to track your revenues</h2>
                        </div>
                        <!-- End Title -->

                        <div class="row mb-7">
                          <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                            <div class="stats-progress position-relative d-flex align-items-center justify-content-center">
                              <!-- Pie Circle -->
                              <div class="js-circle text-center"
                                   data-hs-circles-options='{
                                     "value": 47,
                                     "maxValue": 100,
                                     "duration": 2000,
                                     "isViewportInit": true,
                                     "colors": ["#f8fafd", "#00c9a7"],
                                     "radius": 100,
                                     "width": 8,
                                     "fgStrokeLinecap": "round",
                                     "fgStrokeMiterlimit": "10",
                                     "textClass": "stats-progress-info",
                                     "textFontSize": 24,
                                     "textFontWeight": 500,
                                     "textColor": "#00c9a7",
                                     "secondaryText": "Fast-paced, detail-oriented plugins",
                                     "secondaryTextColor": "#77838f",
                                     "secondaryTextFontSize": "13",
                                     "secondaryTextFontWeight": "400",
                                     "dividerSpace": "10"
                                   }'></div>
                              <!-- End Pie Circle -->
                            </div>
                          </div>

                          <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                            <div class="stats-progress position-relative d-flex align-items-center justify-content-center">
                              <!-- Pie Circle -->
                              <div class="js-circle text-center"
                                   data-hs-circles-options='{
                                     "value": 85,
                                     "maxValue": 100,
                                     "duration": 2000,
                                     "isViewportInit": true,
                                     "colors": ["#f8fafd", "#ffc107"],
                                     "radius": 100,
                                     "width": 8,
                                     "fgStrokeLinecap": "round",
                                     "fgStrokeMiterlimit": "10",
                                     "isHideValue": true,
                                     "additionalText": "4.84",
                                     "additionalTextType": "prefix",
                                     "textClass": "stats-progress-info",
                                     "textFontSize": 24,
                                     "textFontWeight": 500,
                                     "textColor": "#ffc107",
                                     "secondaryText": "rated on GetBootstrap",
                                     "secondaryTextColor": "#77838f",
                                     "secondaryTextFontSize": "13",
                                     "secondaryTextFontWeight": "400",
                                     "dividerSpace": "10"
                                   }'></div>
                              <!-- End Pie Circle -->
                            </div>
                          </div>

                          <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                            <div class="stats-progress position-relative d-flex align-items-center justify-content-center">
                              <!-- Pie Circle -->
                              <div class="js-circle text-center"
                                   data-hs-circles-options='{
                                     "value": 6,
                                     "maxValue": 100,
                                     "duration": 2000,
                                     "isViewportInit": true,
                                     "colors": ["#f8fafd", "#de4437"],
                                     "radius": 100,
                                     "width": 8,
                                     "fgStrokeLinecap": "round",
                                     "fgStrokeMiterlimit": "10",
                                     "textClass": "stats-progress-info",
                                     "textFontSize": 24,
                                     "textFontWeight": 500,
                                     "textColor": "#de4437",
                                     "secondaryText": "months of free support to do your best work",
                                     "secondaryTextColor": "#77838f",
                                     "secondaryTextFontSize": "13",
                                     "secondaryTextFontWeight": "400",
                                     "dividerSpace": "10"
                                   }'></div>
                              <!-- End Pie Circle -->
                            </div>
                          </div>

                          <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                            <div class="stats-progress position-relative d-flex align-items-center justify-content-center">
                              <!-- Pie Circle -->
                              <div class="js-circle text-center"
                                   data-hs-circles-options='{
                                     "value": 45,
                                     "maxValue": 100,
                                     "duration": 2000,
                                     "isViewportInit": true,
                                     "colors": ["#f8fafd", "#377dff"],
                                     "radius": 100,
                                     "width": 8,
                                     "fgStrokeLinecap": "round",
                                     "fgStrokeMiterlimit": "10",
                                     "additionalText": "k+",
                                     "textClass": "stats-progress-info",
                                     "textFontSize": 24,
                                     "textFontWeight": 500,
                                     "textColor": "#377dff",
                                     "secondaryText": "users - from new startups to public companies",
                                     "secondaryTextColor": "#77838f",
                                     "secondaryTextFontSize": "13",
                                     "secondaryTextFontWeight": "400",
                                     "dividerSpace": "10"
                                   }'></div>
                              <!-- End Pie Circle -->
                            </div>
                          </div>
                        </div>

                        <!-- Info -->
                        <div class="text-center">
                          <div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
                            Prefer to start with the Trial version? <a class="d-block d-sm-inline-block font-weight-bold ml-sm-3" href="#">Go here <span class="fas fa-angle-right fa-sm ml-1"></span></a>
                          </div>
                        </div>
                        <!-- End Info -->
                      </div>
                      <!-- End Stats Progress Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="../../assets/vendor/circles/circles.min.js"></script>

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.circles.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of circles
                          $('.js-circle').each(function () {
                            var circle = $.HSCore.components.HSCircles.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #4

2M+

Actions automated monthly

$55M+

Ad budgets managed monthly

37K+

Clients around the world

                    
                      <!-- Stats Section -->
                      <div class="container space-2">
                        <div class="w-lg-80 mx-lg-auto">
                          <div class="row">
                            <div class="col-sm-4 mb-3 mb-sm-0">
                              <div class="text-center">
                                <span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">2M+</span>
                                <p>Actions automated monthly</p>
                              </div>
                            </div>

                            <div class="col-sm-4 mb-3 mb-sm-0">
                              <div class="text-center">
                                <span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">$55M+</span>
                                <p>Ad budgets managed monthly</p>
                              </div>
                            </div>

                            <div class="col-sm-4">
                              <div class="text-center">
                                <span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">37K+</span>
                                <p>Clients around the world</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Stats Section -->
                    
                  

Component #5

                    
                      <!-- Stats Section -->
                      <div class="bg-light rounded mx-3 mx-md-8">
                        <div class="container space-2">
                          <div class="row justify-content-lg-center">
                            <div class="col-md-4 mb-7 mb-md-0">
                              <!-- Stats -->
                              <a class="d-block text-center px-md-3" href="#">
                                <img class="clients mb-3" src="../../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
                                <span class="d-block h2">4.84 / 5</span>
                                <p class="text-body">based on more than 49 real user reviews on Bootstrap Themes</p>
                              </a>
                              <!-- End Stats -->
                            </div>

                            <div class="col-md-4 mb-7 mb-md-0">
                              <!-- Stats -->
                              <a class="d-block text-center column-divider-md column-divider-20deg px-md-3" href="#">
                                <img class="clients mb-3" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
                                <span class="d-block h2">$25,000</span>
                                <p class="text-body">at your company's disposal after accepting your application</p>
                              </a>
                              <!-- End Stats -->
                            </div>

                            <div class="col-md-4">
                              <!-- Stats -->
                              <a class="d-block text-center column-divider-md column-divider-20deg px-md-3" href="#">
                                <img class="clients mb-3" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
                                <span class="d-block h2">40,000+</span>
                                <p class="text-body">business owners use Front across all over the world</p>
                              </a>
                              <!-- End Stats -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Stats Section -->