Bootstrap 5 Responsive Profile Cards

Profile cards on various websites are visual representations of a user's or entity's information. A user's biography is presented in a concise format through this profile card. This information includes a picture, name or title, short bios or activity statistics, social media links, etc. Various types of websites such as corporate websites, portfolio sites, e-commerce sites, social media platforms, and service provider websites use profile cards these days. This is because profile cards provide concise and easily accessible information, ensuring that users can quickly grasp important details without being overwhelmed by additional information. Today we will create some responsive profile cards using Cards in Bootstrap 5. The following video tutorial shows the process of creating cards in code.

Video Tutorial:

Hope you have watched the above video tutorial on Bootstrap Cards or card in Bootstrap. The importance of profile cards for a website's improved user experience, efficiency and organization, aesthetics and visual appeal, branding, interactivity, etc. is undeniable. Profile cards occupy very little space and through this, a visitor gets an idea of the key information of a professional person in a concise format. We used Cards in Bootstrap 5 to create this snippet. We all know that Bootstrap cards are customizable and responsive by default. These cards from Bootstrap are excellent choices for modern web design.

Responsive web design is a web design method used to make a website display well on different devices and screen sizes. The role of responsive web design is very important for a website's user experience, increased reach, SEO benefits, cost-effectiveness, etc. Since our snippet is built using the Bootstrap 5 framework, it is auto-responsive. So we don't need to use a separate CSS media query for this snippet. Our Card in Bootstrap or Bootstrap Card Snippet today features three profile cards Each card UI has an image, title, short bio, and a call-to-action button. The cards are dark-themed and hovering over them will turn the information section into a white background. Each card will translate smoothly along the Y-axis after hovering.

You May Also like:

Bootstrap 5 Responsive Profile Cards [ Source Code ]:

To create these Bootstrap profile cards, first, we need to create the HTML and CSS Files. After that, we need to add Bootstrap 5 CDN in our snippet. Watch the video tutorial above to see how we have added the CDN to our project. Now, copy the source code below and paste it into your HTML and CSS files. If the code is not working properly, download the source code using the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Responsive Profile Cards</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-4">
                <div class="card mx-auto my-5">
                    <img src="img/1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Client Name</h5>
          <hr>
          <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam non facilis, sit reiciendis aspernatur veniam! Eligendi optio architecto, est similique ad sed? Eius ducimus eos perferendis possimus sint. Sequi, blanditiis!</p><!-- lorem30 -->
          <a href="#" class="btn btn-dark">Learn More</a>
        </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card mx-auto my-5">
                    <img src="img/2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Client Name</h5>
          <hr>
          <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam non facilis, sit reiciendis aspernatur veniam! Eligendi optio architecto, est similique ad sed? Eius ducimus eos perferendis possimus sint. Sequi, blanditiis!</p>
          <a href="#" class="btn btn-dark">Learn More</a>
        </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card mx-auto my-5">
                    <img src="img/3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Client Name</h5>
          <hr>
          <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam non facilis, sit reiciendis aspernatur veniam! Eligendi optio architecto, est similique ad sed? Eius ducimus eos perferendis possimus sint. Sequi, blanditiis!</p>
          <a href="#" class="btn btn-dark">Learn More</a>
        </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	transition: all .5s ease-in-out;
}
body {
	background: linear-gradient(to right, #d19f48 50%, #fff 50%);
}
.card {
	width: 22rem;
	background-color: #000;
	color: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 1px rgba(72, 78, 85, .6);
}
.card img {
	border-radius: 20px 20px 0 0;
}
.card:hover {
	background-color: #fff;
	color: #000;
	box-shadow: 0 20px 40px rgba(72, 78, 85, .6);
	transform: translateY(-15px);
}

Integration of profile cards in website design is essential in today's world. Bootstrap 5 responsive profile cards ensure that websites are user-friendly web elements, visually appealing, and adaptable to a diverse array of devices. We hope you have collected the bootstrap card snippet. If you need more you can click the load more button on our homepage. After that, scroll down the website to see the other projects we have done so far. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Bootstrap 5 Responsive Profile Cards [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Responsive Profile Cards

Video Tutorial:

Bootstrap 5 Responsive Profile Cards [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form