Responsive Bootstrap 4 Cards Design

byCodingFlicks -August 19, 2020

0

Hello and welcome back Today, we will create a responsive web design snippet about Bootstrap card design. In my previous blog, I shared a blog post about How to Create a Login Form using Bootstrap 4. Today we will use the Bootstrap 4 framework to design some responsive cards. These cards are container elements that contain useful pieces of information about a website. Cards are a structured way to display content. A well-organized card contains images, text, links, buttons, and more.

In this responsive Bootstrap card design, we will create cards that 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 websites these days use a specific section on their web page to introduce their top-level employees. They provide names, surnames, some informative text about them, social media buttons, or a call to action button at the bottom of the card.

Video Tutorial:

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

You May Also Like:

For the CSS part, We used Lato font for the snippet. We have given a box-shadow effect for the image and information box of the cards. After that, We 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 at the bottom. For that, we have created a custom CSS class with the name ''mx-30''. We 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.

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 the other is a CSS file. After that, you need to copy the HTML and CSS code, paste the code to the appropriate files, and save them. You can download the entire code from the download button below if you want.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com --> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Bootstrap 4 Cards Design</title>
    <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 rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="wrapper">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-lg-4">
					<div class="card mx-30">
						<img alt="..." class="card-img-top" src="img/1.jpg">
						<div class="card-body">
							<h5 class="card-title">Sarah Brown</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 alt="..." class="card-img-top" src="img/2.jpg">
						<div class="card-body">
							<h5 class="card-title">Jessica Williams</h5>
							<h6>Web 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 alt="..." class="card-img-top" src="img/3.jpg">
						<div class="card-body">
							<h5 class="card-title">Emily Davis</h5>
							<h6>Graphics 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>
		</div>
	</div>


</body>
</html>

ADD 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 today. We hope the snippet you collected is working for you. If you want more you can click the load more button on our homepage and scroll down. Please follow this blog on our Twitter and Facebook accounts to stay updated about the latest posts. Thanks for the visit.

DOWNLOAD CODE

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