As we can see, the cards are the same size with some white space between them.

Card column

In earlier versions of Bootstrap, the .card-columns category was used to create Masonry-like layouts where cards were added from top to bottom and left to right. However, in Bootstrap 5, this functionality has been removed.

To achieve a similar layout, you can use the grid system with CSS Masonry layout or a JavaScript plug-in such as Masonry.js to achieve more complex behavior.

Here’s how to create a simple masonry style layout using a grid system and CSS:

Optimize performance

Efficient performance is critical to creating Bootstrap cards that load quickly and adapt seamlessly. The following are practical techniques to enhance performance when integrating Bootstrap card components such as div card body and h5 card title.

Lazy loading of images

Lazy loading delays loading images until they are visible in the viewport, optimizing page speed. Use loading=”lazy” attribute in conjunction with card img top for an efficient solution.

<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">

Optimize image size

Resize images to fit their container dimensions, ensuring faster load times. Use img-fluid and the div class img to automatically scale images.

<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">

This ensures that the top of the card img fits perfectly regardless of the width of the parent element.

Minify CSS and JavaScript

Minify styles and scripts to reduce file size. Combine multiple div header elements and minimize custom CSS to speed up rendering.

Optimization example

Don’t apply repeating or custom styles like this:

<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
   <div class="card-body">
      <h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Headerh5>
      <p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.p>
   div>
div>

Use Bootstrap’s utility classes for a cleaner, more maintainable structure:

<div class="card border-primary text-center p-3">
   <div class="card-body">
      <h5 class="card-title text-uppercase fw-bold">Utility Classes Headerh5>
      <p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.p>
   div>
div>

Make icons using SVG

SVG is lightweight and scalable, making it ideal for card titles and decorative elements. They load faster and maintain clarity across devices.

example

<div class="card text-center">
   <div class="card-header bg-success text-white">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
         <path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
      svg>
      <h5 class="card-title">SVG Optimized Headerh5>
   div>
   <div class="card-body">
      <p class="card-text">SVGs provide clear visuals with minimal overhead.p>
   div>
div>

Preloading and prefetching resources

Use rel=”preload” to load key resources and rel=”prefetch” to predict future needs. This is especially useful for large amounts of card content.

example

<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">

Reduce DOM complexity

Avoid overly nested div class card structures, which can slow down rendering. Simplify layout to optimize performance.

Before optimization

<div class="card">
   <div class="card-body">
      <div>
         <div>
            <p>Nested Contentp>
         div>
      div>
   div>
div>

After optimization

<div class="card">
   <div class="card-body">
      <p class="card-text">Optimized Contentp>
   div>
div>

Optimize fonts

Preload custom fonts or use system fonts to reduce latency. A clean div-like card body can further highlight the visual appeal of the card.

example

<div class="card">
   <div class="card-body" style="font-family: 'Roboto', sans-serif;">
      <h5 class="card-title">Optimized Fonth5>
      <p class="card-text">Preloading ensures faster rendering for card content.p>
   div>
div>

in conclusion

The Bootstrap card element is a powerful addition to the Bootstrap framework, allowing developers to create modern-style web pages without having to have a deep understanding of how CSS works. You can add card layouts to represent image galleries, dashboard widgets, and display blog posts or products from your e-commerce website by adding CSS categories.

Thanks to new features and components, Bootstrap remains a powerful CSS framework that can be used by everyone, especially those who need to create their own responsive and modern style layouts but lack enough time and budget or lack the necessary CSS Developers with in-depth knowledge generate custom code.

If you already know the basics of Bootstrap but want to know how to take your Bootstrap skills to the next level, check out our Build your first website with Bootstrap 4 The course is a quick and fun introduction to the power of Bootstrap.

FAQs for Mastering Responsive Design with Bootstrap Card Components

What is a boot card assembly?

The Bootstrap Card element is a modern and flexible content container that allows you to create visually appealing layouts for text, images, and multimedia. Cards are part of the Bootstrap framework, designed to help developers organize information in a responsive and mobile-friendly way.

How to build Bootstrap card component?

Building the boot card assembly is very simple. You can use a div with a category card as a container and add content like title, text, and image inside it. Here is an example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Titleh5>
    <p class="card-text">This is an example of a Bootstrap card body.p>
  div>
div>

How to set card height and width in Bootstrap?

You can customize the width and height of your Bootstrap card using inline styles or Bootstrap’s utility classes. For example:

<div class="card" style="width: 20rem; height: 15rem;">
  <div class="card-body">
    <h5 class="card-title">Custom Cardh5>
    <p class="card-text">This card has a custom height and width.p>
  div>
div>

Alternatively, you can use a card height guide utility class (such as w-50 or h-100) to responsively set card sizes.

How to resize cards in Bootstrap?

To resize a card, you can use the card size bootstrap utility classes, such as w-25, w-50, or w-75 for width, and h-auto or h-100 for height. This ensures your card fits the layout without incurring additional CSS. Here is an example:

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Responsive Cardh5>
    <p class="card-text">This card resizes based on its parent container.p>
  div>
div>

How to create a card title in Bootstrap?

To add a new title to your card, use

Elements with class=”card-title”. This category ensures that the title’s style is consistent with Bootstrap’s design standards.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Card Titleh5>
      <p class="card-text">This is an example of a Bootstrap card with a title.p>
   div>
div>

How to use card-body category in Bootstrap?

The CardBody class is a utility class that provides the ability to populate and organize content in Bootstrap cards. It is the primary container for card content.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Using card-bodyh5>
      <p class="card-text">This is the content inside the card-body section.p>
   div>
div>

How to fix boot card size?

To fix the size of a card, use an inline style or utility class to apply a specific width and height. For example:

<div class="card" style="width: 250px; height: 300px;">
  <img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Fixed Size Cardh5>
    <p class="card-text">This card has a fixed size for consistency.p>
  div>
div>

How to resize cards in Bootstrap?

Cards can be dynamically resized using Bootstrap’s utility classes or CSS grid. Here is an example of responsive card resizing:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1h5>
        <p class="card-text">Adjustable size based on parent grid.p>
      div>
    div>
  div>
div>

Can I customize Bootstrap card background and borders?

Yes, Bootstrap offers a wide range of custom utility categories. Use bg-primary as the background color and border-success as the border style. example:

<div class="card bg-info border-danger">
  <div class="card-body">
    <h5 class="card-title">Custom Backgroundh5>
    <p class="card-text">This card has a custom background and border.p>
  div>
div>

How to use images with cards?

Bootstrap supports images within cards using card-img-top or card-img-bottom. example:

<div class="card">
  <img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card with Imageh5>
    <p class="card-text">This card includes a top image.p>
  div>
div>

How to use div class card body in Bootstrap?

The div class card body in Bootstrap defines the main content area within the card. It provides padding and ensures consistent spacing of text, images, and other elements within the card.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Titleh5>
    <p class="card-text">This is some text within a card body.p>
  div>
div>

What is the p-type card text in Bootstrap?

The p-type card text in Bootstrap is used to set the style of the text content in the card body. It applies preset typography styles to make text look clean and professional.

<div class="card">
  <div class="card-body">
    <p class="card-text">This is an example of styled text inside a Bootstrap card.p>
  div>
div>

How to increase card size in Bootstrap?

To increase the size of a card, adjust its width and height using w-100 to get full width, or use a style to specify the dimensions. example:

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Large Cardh5>
    <p class="card-text">This card has an increased size for visibility.p>
  div>
div>

How to make cards the same height?

Use .d-flex and .align-items-stretch:

<div class="row g-3">
   <div class="col-md-4 d-flex">
      <div class="card flex-fill">
         <h5 class="card-title">Card 1h5>
         <p class="card-text">Aligned with others.p>
      div>
   div>
div>