Creating Stylish Stat Cards with Flexbox & Bootstrap4

In this tutorial, we'll walk through the process of creating stylish and responsive stat cards using HTML and CSS. We'll leverage the power of Flexbox to achieve a clean and organized layout that adapts gracefully to different screen sizes. These stat cards can be used to showcase various statistics or metrics on your website. Let's dive in!

Introduction

Stat cards are a great way to present important data in a visually appealing manner. Our goal is to create a set of stat cards, each with a distinct color scheme, displaying the total and completed correspondences. Here's a preview of what we'll be building:

Building the HTML Structure

We'll start by structuring our HTML code to define the layout of our stat cards. We're using the Bootstrap framework for the grid system and classes to style our cards. Each card will consist of a title, total value, and completed value. Here's the HTML code:

<div class="row stats">
  <!-- Repeat this structure for each stat card -->
  <div class="col">
    <div class="statContainer blue shadow-sm">
      <div class="title text-center">CORRESPONDENCES</div>
      <div class="d-flex">
        <div class="p-2 flex-fill text-center">TOTAL </br>
          <h5 class="font-weight-bold">20</h5>
        </div>
        <div class="p-2 flex-fill text-center status">COMPLETED </br>
          <h5 class="font-weight-bold">20</h5>
        </div>
      </div>
    </div>
  </div>
  <!-- Repeat for other stat cards -->
</div>

Applying CSS Styles

To make our stat cards visually appealing, we'll apply CSS styles to the HTML structure. We're using Flexbox to arrange the content within each card. Additionally, we're assigning color schemes based on different categories. Here's the CSS code:

body {
  background-color: #f2f3fa;
}

.stats {
  margin: 5px;
}

.stats .col {
  margin: 0;
  padding: 3;
}

.statContainer {
  margin: 5px;
  width: 100%;
  font-size: 13px;
  border-radius: 3px;
  background-color: #fff;
  padding: 0;
  overflow: hidden;
}

/* Add more color styles for other categories */
.statContainer.blue .title {
  background-color: #2d72c0;
}
.statContainer.blue .status {
  color: #2d72c0;
}

/* Repeat for other color styles */

/* Media Queries for Responsive Design */
@media (max-width: 1200px) {
  .stats .col {
    min-width: 20% !important;
  }
}

/* Add more media queries for other screen sizes */

In this tutorial, we've created visually appealing and responsive stat cards using HTML and CSS. By leveraging the Flexbox layout, we've achieved a well-organized design that adapts seamlessly to various screen sizes. You can customize the color schemes and content to match your website's branding and data presentation needs. Feel free to experiment with different styles and adapt this concept for other types of content as well.

I hope you enjoyed this tutorial and found it helpful in enhancing your web design skills. If you have any questions or suggestions, please leave them in the comments below!