layout: page
title: Boxes Components
There are two types of boxes, info boxes & small boxes. Both boxes are used to display statistical snippets.
Info Box
{: .text-bold .text-dark .mt-4}
{: .col-md-4 .col-sm-6 .col-12}
```html
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-flag"></i></span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">410</span>
</div>
</div>
{: .col-md-4 .col-sm-6 .col-12}
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-copy"></i></span>
<div class="info-box-content">
<span class="info-box-text">Uploads</span>
<span class="info-box-number">13,648</span>
</div>
</div>
{: .col-md-4 .col-sm-6 .col-12}
Note!
To wrap the text in to a new line add to the info-box-text the class text-wrap. To truncate the text with ... add to the info-box-content the class text-truncate. (Here you should add a tooltip to display the whole pharse) {: .quote-danger}
Info Box with Progress Bar
{: .text-bold .text-dark .mt-4}
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
</div>
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
<div class="info-box-content">
<span class="info-box-text">Events</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
</div>
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
Small Box
{: .text-bold .text-dark .mt-4}
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
<div class="small-box bg-gradient-success">
<div class="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div class="icon">
<i class="fas fa-user-plus"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the .info-box / .small-box closing tag.
Tip!
We recommend
.fa-2xfor Info Boxes and.fa-3xfor Small Boxes to get a nicely sized loading icon,
like in this documentation. {: .quote-info}
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
You can also use a dark loading style with adding .dark to .overlay like this code.
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>