Rewriting Bootstrap's Card Components Using Tailwind CSS

Table of contents

• Introduction
• Preview
• Code
• Notes
• References

Introduction

In this article, we look at the conversion of Bootstrap 5 cards [↗] to Tailwind CSS 3 [↗].

Preview

Code

Standard card
🚫 Wrap Code📋 Copy
01: <div class="container">
02:     <div class="relative flex flex-col min-w-0  bg-white break-words bg-clip-border border-[1px] border-[solid] w-72 rounded">
03:         <img src="https://placehold.co/600x400" class="card-img-top" alt="...">
04:         <div class="flex-auto p-4">
05:             <h5 class="mb-2">Card title</h5>
06:             <p class="mb-0">Some quick example text to build on the card title and make up the bulk of the card's
07:                 content.</p>
08:         </div>
09:     </div>
10: </div>

List group
🚫 Wrap Code📋 Copy
01: <div class="container mt-4">
02:     <div
03:         class="relative flex flex-col min-w-0 break-words bg-white bg-clip-border border-[0.5px] border-[solid] w-72 rounded">
04:         <div class="px-4 py-2 mb-0 bg-[rgba(0,_0,_0,_.03)]">
05:             Featured
06:         </div>
07:         <ul class="flex flex-col pl-0 mb-0 rounded rounded-none">
08:             <li
09:                 class="relative block px-4 py-2 text-[#212529] no-underline  border-[0.5px] border-[solid] border-[0_0_1px]">
10:                 An item</li>
11:             <li class="relative block px-4 py-2 text-[#212529] no-underline  border-[0.5px] border-[solid]">A second
12:                 item</li>
13:             <li class="relative block px-4 py-2 text-[#212529] no-underline  border-[0.5px] border-[solid]">A third
14:                 item</li>
15:         </ul>
16:     </div>
17: </div>

Horizontal card
🚫 Wrap Code📋 Copy
01: <div class="container mt-4">
02:     <div
03:         class="relative flex flex-col min-w-[0] max-w-[540px] break-words bg-white bg-clip-border border-[1px] border-[solid] w-72 rounded mb-3">
04:         <div class="flex flex-col md:flex-row">
05:             <div>
06:                 <img src="https://placehold.co/600x1300"
07:                     class="!rounded-bl !rounded-tl max-w-full h-auto align-middle" alt="...">
08:             </div>
09:             <div class="sm:ml-4 sm:mr-4">
10:                 <div>
11:                     <h5 class="mb-2">Card title</h5>
12:                     <p class="mb-0">This is a wider card with supporting text below as a natural lead-in to
13:                         additional content. This content is a little bit longer.</p>
14:                     <p class="mb-0"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
15:                 </div>
16:             </div>
17:         </div>
18:     </div>
19: </div>

Notes

The Horizontal card reverts to a standard card on mobile screens, this achieved using the flex utility on line 03 [→].

sm:ml-4 sm:mr-4 [→] is used to provide left and right margins between the image and text when the horizontal card is viewed on a large screen.

For the colors I decided to use the [] syntax to set the exact hex as Bootstrap thus: hover:border-[#0a58ca] text-[#fff].... You can however use Tailwind's color presets [↗].

References

• cards [↗]
• Tailwind hover effect [↗]