Responsive Bootstrap 4 Cards Design

byCodingFlicks -August 19, 2020

0

Hello and Welcome Back, Today, we will create a Bootstrap card design using HTML and CSS. In my previous blog, I have shared a blog about How to Create a Login Form using Bootstrap 4. Today I will use the Bootstrap 4 Framework to design responsive card deck UI, which will look responsive in the mobile devices.

In this Bootstrap 4's snippets for the card, we will design cards that will contain an image, a title, a subtitle, some text, and social media buttons. This snippet will be useful for making a responsive team section design on any website. Most of the websites nowadays use a particular section on their web page to introduce their top-level employees. They provide the name, designation, some informative text about them, social media buttons, or a call to action button at the card's bottom.

In this Project (Bootstrap cards design), I used the predefined bootstrap 4's classes, which saves me a considerable amount of time to get the result. The container class of bootstrap 4 helped to align the content to center and give margins and padding to content. I used a custom wrapper class to provide the container class a custom padding on the top. I have created three separate boxes with the bootstrap 4's column grid. Inside the Bootstrap card div element, I took an image, and for the card-body div element, I provided a random name for the card-title. For the designation, I used an h6 tag. Then I have provided some dummy text in card-text, which denotes a short bio for the person's image. In a separate div named "socials," I offered four social media icons from font-awesome. Then I followed the same pattern for the next two card div despite changing the image URL, name, and designation.

You May Also Like:

For the CSS part, I used Lato font for the snippet. I have given a box-shadow effect for the image and information box of the cards. After that, I did some basic styling for the title, subtitle, text, and social media buttons. I have given corresponding brand colors for each social media icon so that it looks a bit lucrative. After finishing the styling, if we check the project in any browser's mobile format, we will observe that the card doesn't have any spacing in the bottom. For that, I have created a custom CSS class with the name of ''mx-30''. I did the styling in CSS media-queries for any devices under 800px. After that, I added the class to every "card" div element. Now when we resize the browser, we will see that 30px underneath each of the cards.

For this project, I linked the Bootstrap four and the font-awesome CDN links below for your convenience. You can copy the files from below and add them directly to your HTML file.

Responsive Bootstrap 4 Cards Design (Source Code)
To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

REQUIRED FILES:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">

HTML:

<div class="wrapper">
        <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="card mx-30">
                  <img src="https://i.postimg.cc/WzjcC7Hb/1.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">
Julia Thorn</h5>
<h6>
Junior Developer</h6>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse amet repellat, eaque aliquid similique eius alias facilis quisquam, ipsa dolor.</p>
<div class="socials">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-dribbble"></i></a>
                    </div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
                <div class="card mx-30">
                  <img src="https://i.postimg.cc/mgKqKwcf/2.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">
Martha David</h5>
<h6>
UI / UX Designer</h6>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse amet repellat, eaque aliquid similique eius alias facilis quisquam, ipsa dolor.</p>
<div class="socials">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-dribbble"></i></a>
                    </div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
                <div class="card mx-30">
                  <img src="https://i.postimg.cc/Y9zsGBdM/3.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">
Laura Chedd</h5>
<h6>
Full-Stack Developer</h6>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse amet repellat, eaque aliquid similique eius alias facilis quisquam, ipsa dolor.</p>
<div class="socials">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-dribbble"></i></a>
                    </div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS:

body {
 font-family: 'Lato', sans-serif;
 background-color: #f4b927;
}
.wrapper {
padding-top: 120px;
}
.card-img-top {
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.card-body{
    text-align: center;
    box-shadow: 0px 15px 15px -8px rgba(0,0,0,0.5)
}
.card-body h6 {
font-size: 14px;
text-transform: uppercase;
color: deeppink;
}
.card-title {
text-transform: uppercase;
font-weight: bold;
font-size: 24px;
}

.socials a {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
margin: 0 5px;
}
.socials a i {
color: #fff;
padding: 12px 0;
}    

.socials a:nth-child(1) {
background: #3b5998;
}.socials a:nth-child(2) {
background: #ff0000;
}.socials a:nth-child(3) {
background: #007bb5;
}.socials a:nth-child(4) {
background: #ea4c89;
}

@media (max-width: 800px){
    .mx-30{
        margin-bottom: 30px;
    }
}

That's it for this tutorial. I hope it helps. Please follow this blog on our Twitter and Facebook Group to stay updated latest articles.

Please do not enter any spam link in the comment box.