<section class="bg-secondary-dark py-24 py-md-40 overflow-hidden">
<div class="container">
<div class="row mx-lg-n10 mx-xl-n20">
<div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-lg-0">
<div class="mw-xs mx-auto px-10 px-lg-0">
<div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px">
<img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart.svg" alt="">
<p class="text-white mb-0">
<span class="h4 text-white fw-bold">8</span>
<span>%</span>
</p>
</div>
<div class="pt-14 border-top border-secondary">
<h3 class="h6 text-white mb-8">New tools</h3>
<p class="text-secondary-light mb-0">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-lg-0">
<div class="mw-xs mx-auto px-10 px-lg-0">
<div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px">
<img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-purple.svg" alt="">
<p class="text-white mb-0">
<span class="h4 text-white fw-bold">45</span>
<span>%</span>
</p>
</div>
<div class="pt-14 border-top border-secondary">
<h3 class="h6 text-white mb-8">Workshop</h3>
<p class="text-secondary-light mb-0">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20 mb-20 mb-md-0">
<div class="mw-xs mx-auto px-10 px-lg-0">
<div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px">
<img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-green.svg" alt="">
<p class="text-white mb-0">
<span class="h4 text-white fw-bold">5</span>
<span>/6</span>
</p>
</div>
<div class="pt-14 border-top border-secondary">
<h3 class="h6 text-white mb-8">Meetings</h3>
<p class="text-secondary-light mb-0">The time, this accumsan augue, posuere posuere elit lorem.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 px-lg-10 px-xl-20">
<div class="mw-xs mx-auto px-10 px-lg-0">
<div class="d-flex justify-content-center align-items-center position-relative mb-12" style="width: 80px; height: 80px">
<img class="position-absolute top-0 start-0 img-fluid" src="zospace-assets/lines/circle-chart-pink.svg" alt="">
<p class="text-white mb-0">
<span class="h4 text-white fw-bold">79</span>
<span>%</span>
</p>
</div>
<div class="pt-14 border-top border-secondary">
<h3 class="h6 text-white mb-8">Webinars</h3>
<p class="text-secondary-light mb-0">Again and again vehicula libero at nibh volutpat lacinia non sed you see.</p>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 43
- Applications 5
- Banner 15
- Blog 53
- Call to action 86
- Contact 28
- Contacts 5
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 39
- Features 118
- Footers 48
- Graphs 18
- HTTP codes 43
- Headers 86
- How it works 39
- Logo clouds 68
- Modals 3
- Navbar 68
- Navigation (horizontal) 80
- Navigation (vertical) 6
- Navigations 4
- Newsletter 41
- Portfolio 39
- Pricing 35
- Projects 9
- Reviews 5
- Sign in / Sign up 65
- Stats 71
- Tables 52
- Tables 5
- Team 35
- Testimonials 35
- Users 25
In presenting data, it is important not to bore your audience. When showing larger data sets, it's a good idea to vary the presentation to keep users' attention. You can achieve this with a variety of ways to show data through our Bootstrap component stats. Highlight the most important data and choose the right presentation for each data type!
Choose from many variations of the Bootstrap components stats. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Bootstrap components stats, code and our editor. Try the demo for free.
Component #6
Component #7
Component #8
Component #9
Component #10
