Back to Discover
Bootstrap 5 Card Layout Code Snippet with Grid System

hunzala
Created Nov 04, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Grid Layout</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Fonts - Roboto -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

    <!-- Ionicons -->
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <style>
      body {
        font-family: 'Roboto', sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 60px 0;
      }

      /* Header Section */
      .page-header {
        text-align: center;
        color: white;
        margin-bottom: 60px;
      }

      .page-header h1 {
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 15px;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      .page-header p {
        font-size: 1.3rem;
        font-weight: 300;
        opacity: 0.95;
      }

      /* Card Styles */
      .card-custom {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        height: 100%;
        background: white;
      }

      .card-custom:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
      }

      /* Card Image */
      .card-img-wrapper {
        position: relative;
        overflow: hidden;
        height: 220px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .card-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .card-custom:hover .card-img-wrapper img {
        transform: scale(1.1);
      }

      .card-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.95);
        color: #667eea;
        padding: 8px 18px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        backdrop-filter: blur(10px);
      }

      .card-icon-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card-icon-overlay ion-icon {
        font-size: 40px;
        color: white;
      }

      /* Card Body */
      .card-body-custom {
        padding: 30px;
      }

      .card-category {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #667eea;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        margin-bottom: 12px;
        letter-spacing: 0.5px;
      }

      .card-category ion-icon {
        font-size: 18px;
      }

      .card-title-custom {
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 15px;
        line-height: 1.3;
      }

      .card-text-custom {
        color: #666;
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 25px;
      }

      /* Card Footer */
      .card-footer-custom {
        padding: 20px 30px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .card-meta {
        display: flex;
        gap: 20px;
        font-size: 0.9rem;
        color: #666;
      }

      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .meta-item ion-icon {
        font-size: 18px;
        color: #999;
      }

      .card-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 10px 25px;
        border-radius: 50px;
        border: none;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .card-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        color: white;
      }

      .card-btn ion-icon {
        font-size: 18px;
      }

      /* Featured Card */
      .card-featured {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }

      .card-featured .card-category,
      .card-featured .card-title-custom,
      .card-featured .card-text-custom {
        color: white;
      }

      .card-featured .card-footer-custom {
        background: rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.2);
      }

      .card-featured .card-meta,
      .card-featured .meta-item ion-icon {
        color: rgba(255, 255, 255, 0.9);
      }

      .card-featured .card-btn {
        background: white;
        color: #667eea;
      }

      .card-featured .card-btn:hover {
        background: rgba(255, 255, 255, 0.95);
      }

      /* Horizontal Card */
      .card-horizontal {
        display: flex;
        flex-direction: row;
      }

      .card-horizontal .card-img-wrapper {
        width: 40%;
        height: auto;
      }

      .card-horizontal-content {
        width: 60%;
        display: flex;
        flex-direction: column;
      }

      /* Responsive Grid */
      @media (max-width: 768px) {
        .page-header h1 {
          font-size: 2.5rem;
        }

        .card-horizontal {
          flex-direction: column;
        }

        .card-horizontal .card-img-wrapper,
        .card-horizontal-content {
          width: 100%;
        }

        .card-horizontal .card-img-wrapper {
          height: 220px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Header -->
      <div class="page-header">
        <h1>Our Services</h1>
        <p>Discover our amazing features and offerings</p>
      </div>

      <!-- Card Grid - 3 Columns -->
      <div class="row g-4 mb-5">
        <!-- Card 1 -->
        <div class="col-lg-4 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <span class="card-badge">Popular</span>
              <div class="card-icon-overlay">
                <ion-icon name="code-slash"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <div class="card-category">
                <ion-icon name="pricetag"></ion-icon>
                Development
              </div>
              <h3 class="card-title-custom">Web Development</h3>
              <p class="card-text-custom">
                Build modern, responsive websites with cutting-edge technologies and best practices.
              </p>
            </div>
            <div class="card-footer-custom">
              <div class="card-meta">
                <div class="meta-item">
                  <ion-icon name="time"></ion-icon>
                  <span>4 weeks</span>
                </div>
                <div class="meta-item">
                  <ion-icon name="star"></ion-icon>
                  <span>4.8</span>
                </div>
              </div>
              <button class="card-btn">
                Learn More
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>

        <!-- Card 2 - Featured -->
        <div class="col-lg-4 col-md-6">
          <div class="card card-custom card-featured">
            <div class="card-img-wrapper">
              <span class="card-badge">Featured</span>
              <div class="card-icon-overlay">
                <ion-icon name="phone-portrait"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <div class="card-category">
                <ion-icon name="pricetag"></ion-icon>
                Mobile
              </div>
              <h3 class="card-title-custom">App Development</h3>
              <p class="card-text-custom">
                Create stunning mobile applications for iOS and Android platforms with native performance.
              </p>
            </div>
            <div class="card-footer-custom">
              <div class="card-meta">
                <div class="meta-item">
                  <ion-icon name="time"></ion-icon>
                  <span>6 weeks</span>
                </div>
                <div class="meta-item">
                  <ion-icon name="star"></ion-icon>
                  <span>5.0</span>
                </div>
              </div>
              <button class="card-btn">
                Learn More
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="col-lg-4 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <span class="card-badge">New</span>
              <div class="card-icon-overlay">
                <ion-icon name="brush"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <div class="card-category">
                <ion-icon name="pricetag"></ion-icon>
                Design
              </div>
              <h3 class="card-title-custom">UI/UX Design</h3>
              <p class="card-text-custom">
                Design beautiful, intuitive interfaces that users love and deliver exceptional experiences.
              </p>
            </div>
            <div class="card-footer-custom">
              <div class="card-meta">
                <div class="meta-item">
                  <ion-icon name="time"></ion-icon>
                  <span>3 weeks</span>
                </div>
                <div class="meta-item">
                  <ion-icon name="star"></ion-icon>
                  <span>4.9</span>
                </div>
              </div>
              <button class="card-btn">
                Learn More
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Card Grid - 4 Columns -->
      <div class="row g-4 mb-5">
        <!-- Small Cards -->
        <div class="col-lg-3 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <div class="card-icon-overlay">
                <ion-icon name="analytics"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <h3 class="card-title-custom">Analytics</h3>
              <p class="card-text-custom">
                Track and analyze your data with powerful insights.
              </p>
              <button class="card-btn">
                Explore
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <div class="card-icon-overlay">
                <ion-icon name="shield-checkmark"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <h3 class="card-title-custom">Security</h3>
              <p class="card-text-custom">
                Enterprise-grade security to protect your data.
              </p>
              <button class="card-btn">
                Explore
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <div class="card-icon-overlay">
                <ion-icon name="rocket"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <h3 class="card-title-custom">Performance</h3>
              <p class="card-text-custom">
                Lightning-fast speed and optimal performance.
              </p>
              <button class="card-btn">
                Explore
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="card card-custom">
            <div class="card-img-wrapper">
              <div class="card-icon-overlay">
                <ion-icon name="people"></ion-icon>
              </div>
            </div>
            <div class="card-body-custom">
              <h3 class="card-title-custom">Support</h3>
              <p class="card-text-custom">
                24/7 dedicated support for all your needs.
              </p>
              <button class="card-btn">
                Explore
                <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Horizontal Card - Full Width -->
      <div class="row g-4">
        <div class="col-12">
          <div class="card card-custom card-horizontal">
            <div class="card-img-wrapper">
              <div class="card-icon-overlay">
                <ion-icon name="trophy"></ion-icon>
              </div>
            </div>
            <div class="card-horizontal-content">
              <div class="card-body-custom">
                <div class="card-category">
                  <ion-icon name="pricetag"></ion-icon>
                  Premium Service
                </div>
                <h3 class="card-title-custom">Enterprise Solutions</h3>
                <p class="card-text-custom">
                  Get comprehensive enterprise solutions tailored to your business needs. Our team of experts 
                  will work closely with you to deliver scalable, secure, and high-performance solutions that 
                  drive your business forward.
                </p>
              </div>
              <div class="card-footer-custom">
                <div class="card-meta">
                  <div class="meta-item">
                    <ion-icon name="time"></ion-icon>
                    <span>Custom Timeline</span>
                  </div>
                  <div class="meta-item">
                    <ion-icon name="star"></ion-icon>
                    <span>5.0</span>
                  </div>
                  <div class="meta-item">
                    <ion-icon name="people"></ion-icon>
                    <span>500+ Clients</span>
                  </div>
                </div>
                <button class="card-btn">
                  Contact Sales
                  <ion-icon name="arrow-forward"></ion-icon>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
Comments (0)

No comments yet. Be the first!