BootStrap 5

Profile Card with Statistical Details

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <div class="main-body d-flex justify-content-center align-items-center vh-100">
        <div class="card text-center border-0 shadow-sm col-md-5 col-sm-7 col-xxl-4 p-5 position-relative card-div">
            <div class="row justify-content-center position-absolute top-0 start-50 translate-middle">
                <div class="col-auto">
                    <img src="https://mdbootstrap.com/img/new/standard/nature/111.webp"
                        class="rounded-circle border border-4 border-primary p-1 ms-4" alt="Profile Image" width="125" height="125">
                </div>
            </div>
            <div class="d-flex flex-column mt-4">
                <h5 class="card-title mt-3 text-primary">Muhammad Erdem</h5>
                <p class="card-text ">Front-end Developer from Mesopotamia</p>
                <div class="d-flex justify-content-center">
                    <i class="material-icons">location_on</i>
                    <p class="card-text ">Istanbul, Turkey</p>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-5">
                <div>
                    <h5 class="card-title">1598</h5>
                    <p class="card-text ">Followers</p>
                </div>
                <div>
                    <h5 class="card-title">65</h5>
                    <p class="card-text ">Following</p>
                </div>
                <div>
                    <h5 class="card-title">123</h5>
                    <p class="card-text ">Articles</p>
                </div>
                <div>
                    <h5 class="card-title">85</h5>
                    <p class="card-text ">Works</p>
                </div>
            </div>

            <div class="d-flex justify-content-between mt-5">

                <div class="div-icon border rounded-circle d-flex bg-primary justify-content-center align-items-center" >
                    <a href="#"><i class="fab fa-facebook icon" ></i></a>
                </div>
                
                <div class="div-icon border rounded-circle d-flex bg-info justify-content-center align-items-center">
                    <a href="#"><i class="fab fa-twitter icon" ></i></a>
                </div>
                
                <div class="div-icon border rounded-circle d-flex bg-danger justify-content-center align-items-center" >
                    <a href="#"><i class="fab fa-instagram icon" ></i></a>
                </div>

                <div class="div-icon border rounded-circle d-flex  justify-content-center align-items-center" style="background: rgb(94, 94, 194);">
                    <a href="#"><i class="fab fa-behance icon" ></i></a>
                </div>
                
                <div class="div-icon border rounded-circle d-flex bg-secondary justify-content-center align-items-center">
                    <a href="#"><i class="fab fa-github icon" ></i></a>
                </div>
                <div class="div-icon border rounded-circle d-flex bg-success justify-content-center align-items-center">
                    <a href="#"><i class="fab fa-whatsapp icon"></i></a>
                </div>

                <div class="div-icon border rounded-circle d-flex  justify-content-center align-items-center"  style="background: rgb(236, 22, 22);">
                    <a href="#"><i class=" fas fa-link icon"></i></a>
                </div>

            </div>

            <div class="d-flex justify-content-center mt-5">
                <button class="btn btn-primary mx-4 px-5 rounded-pill">Message</button>
                <button class="btn btn-danger mx-4 px-5 rounded-pill" >Follow</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

.main-body{
            background-color: rgb(248, 248, 248);
        }
.div-icon{
  width: 34px;
  height: 34px;
}
.icon{
  color: white;
}
.card-div{
  margin-top: 100px;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

Copy CDN

https://fonts.googleapis.com/icon?family=Material+Icons

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Lead Product Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
<div class="main-body d-flex justify-content-center align-items-center vh-100" >
      <div class="container">
        <div class="card mx-auto" style="max-width: 25rem">
          <img
            src="https://static.vecteezy.com/system/resources/previews/008/748/719/original/expired-skin-care-product-gradient-linear-icon-contains-toxins-and-bacteria-spoiled-cream-leads-to-irritation-thin-line-color-symbol-modern-style-pictogram-isolated-outline-drawing-vector.jpg"
            class="card-img-top ms-4 mt-3 border rounded"
            alt="Weather Image"
          />
          <div class="ellipsis">
            <i class="fas fa-ellipsis-h"></i>
          </div>
          <div class="card-body px-4 mb-3">
            <h4 class="card-title">Lead Product Design</h4>
            <p class="card-text text-gray">
              In publishing and graphic design, Lorem ipsum is a placeholder
              text commonly used to demonstrate the visual form of a document or
              a typeface without
            </p>
          </div>
          <div class="d-flex justify-content-around px-3 mb-1">
            <p class="bg-light-green rounded px-3 py-1">Full Time</p>
            <p class="bg-light-purple rounded px-3 py-1">Min. 1 year</p>
            <p class="bg-light-red rounded px-3 py-1">Max. 3 years</p>
          </div>
          <div
            class="friends d-flex justify-content-start align-items-center px-4 mb-3"
          >
            <i class="fa-solid fa-users me-2"></i>
            <p class="m-0 text-secondary">5 Friends Work here</p>
          </div>
          <div class="card-footer bg-white px-4 py-3">
            <button type="button" class="btn btn-purple rounded-pill text-white">
              Apply Now
            </button>
            <button type="button" class="btn btn-whitesmoke rounded-pill">Message</button>
          </div>
        </div>
      </div>
    </div>

.main-body {
  background-color: pink;
}

.text-gray {
  color: gray;
}

.card {
  background-color: #f8f9fa;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-img-top {
  max-width: 80px;
  margin: 5px;
  height: auto;
  position: relative;
}

.ellipsis {
  position: absolute;
  top: 5px;
  right: 15px;
  color: black;
  padding: 5px;
  cursor: pointer;
}

.friends i {
  font-size: 14px;
  color: #87ceeb;
}

.bg-light-green {
  background-color: #90ee90;
  border-radius: 15px;
}

.bg-light-purple {
  background-color: paleturquoise;
  border-radius: 15px;
}

.bg-light-red {
  background-color: #fe9898;
  border-radius: 15px;
}

.btn-purple {
  background-color: purple !important;
  width: 40%;
}

.btn-whitesmoke {
  width: 40%;
  margin-left: 15%;
  background: silver !important;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

Map Card

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- Font Awesome CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

  <div class="main-body d-flex justify-content-center align-items-center vh-100">
    <div class="card mx-auto mt-5 border-0 shadow" style="width: 20rem">
      <img src="https://tse1.mm.bing.net/th?id=OIP.0ZZ_wR6YXUFIHjek4j6CFwHaEK&pid=Api&P=0&h=220" class="card-img-top" alt="Central Park Zoo" />
      <div class="cycle shadow">
        <i class="fa-solid fa-bicycle"></i>
      </div>
      <div class="card-body">
        <div class="heading d-flex">
          <div>
            <h5 class="text-orange">Central Park Zoo</h5>
            <small class="text-orange">A place to relax</small>
          </div>
          <p class="text-orange">25 min</p>
        </div>
        <div class="hr">
          <hr />
        </div>

        <div class="card-btns d-flex">
          <div>
            <p>CALL</p>
            <i class="fa-solid fa-phone"></i>
          </div>
          <div>
            <p>LOVE</p>
            <i class="fa-solid fa-cat"></i>
          </div>
          <div>
            <p>SMILE</p>
            <i class="fa-solid fa-smile"></i>
          </div>
        </div>

        <hr>

        <div class="address">
           <div class="address-icon d-flex">
            <i class="fa-solid fa-location-dot"></i>
            <p>East 64th Street , New York , NY 100021 , US</p>
           </div>
           <div class="address-heading d-flex">
            <i class="fa-solid fa-clock"></i>
            <p>Closed  Opens 10 AM</p>
           </div>
        </div>
      </div>
    </div>
  </div>

.main-body {
        background-color: whitesmoke;
      }
      .card {
        height: 500px;
      }
      .cycle {
        width: 13%;
        padding: 8px 0px;
        position: absolute;
        z-index: 3;
        top: 31%;
        right: 4%;
        background-color: #ec5800;
        border-radius: 20px;
        text-align: center;
        color: white;
      }
      .text-orange {
        color: #ec5800;
      }

      .cycle i {
        font-size: 13px;
      }

      .heading {
        width: 100%;
        margin: 5px;
      }

      .heading p {
        margin-top: 13%;
        margin-left: 32%;
        font-size: 14px;
      }
    

      .card-btns {
        justify-content: space-between;
        margin: 0px 10px;
        font-size: 14px;
        text-align: center;
        color: #ec5800;
      }

      .card-btns i {
        font-size: 15px;
      }

      .address {
        width: 100%;
        font-size: 14px;
      }
      .address i {
         font-size: 14px;
         margin-right: 10px;
         margin-top: 4px;
         color: #ec5800;
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

Weather Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="main-body d-flex justify-content-center align-items-center vh-100">
    <div class="container">
        <div class="card mx-auto border-0 shadow rounded-1" style="width: 19rem;">
            <div class="card-body">
                <h5>Warsaw</h5>
                <p class="weather-description">Mon, 12:30 PM - Mostly Sunny</p>
                <div class="temperature d-flex">23<span class="temperature-unit">°<i class="fa-light fa-c"></i></span>
                </div>
                <div class="weather-condition d-flex">
                    <div class="water-description"><i class="fa-solid fa-droplet water-color"></i>3% Precipitation</div>
                    <div class="wind-description"><i class="fa-solid fa-leaf"></i>21 km/h Winds</div>
                </div>

                <div class="horizontal-line"></div>

                <div class="weather-time d-flex">
                    <p>8AM</p>
                    <p>11AM</p>
                    <p>2PM</p>
                    <p>5PM</p>
                    <p>8PM</p>
                </div>

                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-sun text-warning"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-cloud-sun-rain water-color"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-sun text-warning"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-cloud-sun-rain water-color"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <hr class="text-gray">

            </div>
        </div>
    </div>
</div>

.main-body {
  background-color: whitesmoke;
}

.card {
  width: 18rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.card-header {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.card-body {
  padding: 10px;
}

.temperature {
  font-size: 4rem;
  font-weight: 350;
}

.temperature-unit {
  font-size: 1.5rem;
  margin-top: 15px;
  margin-left: 3px;
}

.weather-description {
  color: gray;
  margin-top: 10px;
}

.water-color {
  color: #74ccf4;
}

.water-description {
  color: gray;
  margin-top: 10px;
}

.wind-description {
  color: gray;
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
}

.fa-leaf {
  color: gray;
  margin-top: 5px;
}

.weather-condition i {
  font-size: 14px;
  padding-right: 5px;
}

.horizontal-line {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, black 50%, whitesmoke 50%);
  margin: 20px 0;
}

.weather-time {
  justify-content: space-around;
}

.weather-time p {
  color: gray;
}

.weather-day {
  margin-left: 15px;
  justify-content: space-between;
}

.text-gray {
  color: gray;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

Membership Gym Card

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js'
        crossorigin='anonymous'></script>

<div class="main-container d-flex justify-content-center align-items-center vh-100">
        <div class="card border border-0 shadow-sm">
            <img src="https://images.pexels.com/photos/1229356/pexels-photo-1229356.jpeg?cs=srgb&dl=pexels-anush-gorak-1229356.jpg&fm=jpg"
                class="card-img-top" alt="...">
            <div class="card-body text-secondary">
                <h5 class="card-title text-dark m-0">BODY BUILDING PROGRAM</h5>
                <p class="card-text">WITH JOHNATHAN DOE</p>
                <p class="mb-2"><i class='far fa-check-circle text-success'></i> 6 Days a Week</p>
                <p class="mb-2"><i class='far fa-check-circle text-success'></i> Dedicated Trainer
                    Allocated</p>
                <p class="mb-2"><i class='far fa-check-circle text-success'></i> Diet Plan Included
                </p>
                <p class="mb-2"><i class='far fa-check-circle text-success'></i> Morning and Evening
                    Batches</p>
                <div class="d-flex justify-content-between">
                    <div class="text-dark">
                        <h1 class="d-inline-block m-0">$99</h1><span>/m</span>
                    </div>
                    <a href="#" class="btn btn-danger align-self-center rounded-pill px-4 py-2">Choose Plan</a>
                </div>
            </div>
        </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

.main-container {
            font-family: century-gothic, sans-serif;
            background-color: rgb(243, 243, 243);
        }

        .card {
            width: 19rem;
        }

        .card-text {
            font-size: small;
            font-weight: bold;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Corporate Team Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js'
        crossorigin='anonymous'></script>

<div class="main-container d-flex flex-column flex-md-row justify-content-center align-items-center min-vh-100">
      <div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://cdn.theorg.com/69212adb-32e1-4b01-a945-36b582797e54_thumb.jpg"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Ben Johnson</h3>
          <p class="card-text">MUSICIAN</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

          <i class="social-icon fa-brands fa-facebook-f fa-sm me-3"></i>
          <i class="social-icon fa-brands fa-x-twitter me-3"></i>
          <i class="social-icon fa-brands fa-instagram"></i>
        </div>
      </div>

      <div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://img.webmd.com/lhd/provider_prod/2258383_ProviderProfileImage_a747e2d0-dbba-47ae-a225-7a3cdec61688.jpg?resize=150px:*"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Emily Clark</h3>
          <p class="card-text">ARTIST</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

          <i class="social-icon fa-brands fa-facebook-f fa-sm me-3"></i>
          <i class="social-icon fa-brands fa-x-twitter me-3"></i>
          <i class="social-icon fa-brands fa-instagram"></i>
        </div>
      </div>

      <div class="card border border-0 shadow-sm m-2 text-center">
        <div class="container mt-4">
          <div class="row justify-content-center">
            <div class="col-auto">
              <img
                src="https://media.licdn.com/dms/image/C5603AQF2Fz5-qMqu4Q/profile-displayphoto-shrink_800_800/0/1651266402958?e=2147483647&v=beta&t=KLmjj4-0oWdX1Hf2wafeuDHsBNKaEWG1oRlK9D2AhSM"
                class="rounded-circle p-1"
                alt="Profile Image"
                width="150"
                height="150"
              />
            </div>
          </div>
        </div>
        <div class="card-body text-secondary">
          <h3 class="card-title text-dark">Carl Kent</h3>
          <p class="card-text">STYLIST</p>
          <p class="mb-2">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>

          <i class="social-icon fa-brands fa-facebook-f fa-sm me-3"></i>
          <i class="social-icon fa-brands fa-x-twitter me-3"></i>
          <i class="social-icon fa-brands fa-instagram"></i>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

.main-container {
  background-color: rgb(243, 243, 243);
}

.card-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.card {
  width: 18rem;
}

.card-text {
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 3px;
  color: gainsboro;
}

.social-icon {
  color: gainsboro;
  cursor: pointer;
}
.social-icon:hover {
  color: gray;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Order Card

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container-fluid">
      <div class="row min-vh-100 align-items-center">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Starter</span
            >
            <div class="w-100 mb-3 mt-4">
              <span class="h1 price">$3</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 5 users</p>
            <p class="text-secondary">Basic support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3 active">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Professional</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$6</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 10 users</p>
            <p class="text-secondary">Advanced support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order Now</a
            >
          </div>
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Business</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$9</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 25 users</p>
            <p class="text-secondary">Premium support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Enterprise</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$12</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 50 users</p>
            <p class="text-secondary">Full support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>
      </div>
    </div>
    
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

<script>
      document.addEventListener("DOMContentLoaded", function (event) {
        let cards = document.querySelectorAll(".card");

        if (cards) {
          cards.forEach(function (card, card_index) {
            card.addEventListener("click", function () {
              card.classList.toggle("active");

              cards.forEach(function (otherCard, otherCard_index) {
                if (card_index !== otherCard_index) {
                  otherCard.classList.remove("active");
                }
              });
            });
          });
        }
      });
    </script>

.card {
        min-width: 15rem;
        max-width: 20rem;
        margin: auto;
        cursor: pointer;
      }

      .card .package-type {
        background-color: #9d37fb;
        transition: 0.5s ease;
      }

      .card .price {
        color: #9d37fb;
      }

      .card.active {
        border: 2px solid #9d37fb !important;
      }

      .card.active .package-type {
        width: 70% !important;
        transition: 0.5s ease;
      }

      .card.active .price {
        color: #000 !important;
      }

      .card.active .per-month {
        color: #000 !important;
      }

      .card.active p {
        color: #000 !important;
      }

      .card.active .custom-btn {
        color: #fff !important;
        background-color: #9d37fb !important;
        border: 1px solid #9d37fb !important;
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

Hotel Booking Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="bg-light d-flex justify-content-center align-items-center vh-100">
    <div class="card m-5 border-0 shadow" style="width: 40rem">
        <div class="card-body d-flex">
            <div class="img">
                <img src="https://wallpapercave.com/wp/wp2787397.jpg" class="card-img-top rounded-3" alt="" style="width: 13rem; height: 200px" />
            </div>
            <div class="content">
                <div class="upper-content d-flex">
                    <div>vacantions</div>
                    <div><i class="fa-solid fa-star"></i> 4.96 (reviews)</div>
                    <div>
                        <i class="fa-solid fa-heart"></i>
                    </div>
                    <div class="bg-whitesmoke rounded-pill" style="padding: 0px 5px">
                    Superhost
                    </div>
                </div>
                <div class="middle-content">
                    <h4>The Mejestic and  WonderFul Behamas</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis et augue eget rutrum. Praesent ullamcorper quam quis volutpat . <b>$110</b>/night </p>
                </div> 
            </div>
        </div>
    </div>
</div>

.content {
            width: 100%;
        }

        .upper-content {
            justify-content: space-around;
        }

        .bg-whitesmoke {
            background-color: whitesmoke;
        }

        .fa-star {
            color: orange;
        }

        .fa-heart {
            color: red;
        }
        .middle-content {
        margin:5px 20px; 

        }
        .middle-content h4{
        font-weight: 800;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

Classic Team Member Card

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="main-body d-flex justify-content-center align-items-center vh-100">
        <div class="card text-center border-0 shadow-sm py-4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-auto">
                        <img src="https://mdbootstrap.com/img/new/standard/nature/111.webp" class="rounded-circle border p-1" alt="Profile Image" width="125" height="125">
                    </div>
                </div>
            </div>
            <h5 class="card-title mt-3">Manuella Nevoresky</h5>
            <p class="card-text text-body-secondary">CEO - FOUNDER</p>
            <div class="d-flex justify-content-center">
                <a href="#"><i class="border rounded-circle icon fab fa-facebook-f m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-twitter m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-instagram m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-linkedin-in m-2 p-2"></i></a>
            </div>
        </div>
</div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

.main-body{
background-color: rgb(248, 248, 248);
}
.card {
  			width: 20rem;
}
.card-text {
            font-size: 12px;
        }
        .icon{
            width: 34px;
            height: 34px;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

BootStrap 5

Profile Card with Statistical Details

Lead Product Card

Map Card

Weather Card

Membership Gym Card

Corporate Team Card

Order Card

Hotel Booking Card

Classic Team Member Card

AdBlock Detected!