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}

Messages 1,410 Bookmarks 410 Uploads 13,648

<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Messages</span>
    <span class="info-box-number">1,410</span>
  </div>
</div>

{: .col-md-4 .col-sm-6 .col-12}

<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}

Bookmarks 41,410 70% Increase in 30 Days Likes 41,410 70% Increase in 30 Days Events 41,410 70% Increase in 30 Days

<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Bookmarks</span>
    <span class="info-box-number">41,410</span>
    <div class="progress">
      <div class="progress-bar bg-info" 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-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}

150 New Orders More info 44 User Registrations More info

<div class="small-box bg-info">
  <div class="inner">
    <h3>150</h3>
    <p>New Orders</p>
  </div>
  <div class="icon">
    <i class="fas fa-shopping-cart"></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}

<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-2x for Info Boxes and .fa-3x for 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>

Messages 1,410 Bookmarks 41,410 70% Increase in 30 Days 150 New Orders More info

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>

Messages 1,410 Bookmarks 41,410 70% Increase in 30 Days 150 New Orders More info