Profile cards are one of the best way to showcase users details. Most probably social sites are using this technique most. However bootstrap is one of the most popular css framework out there. In this post i will explain how you can create professional bootstrap cards. Actually we will create profile cards with bootstrap so i am calling it bootstrap cards.

What is profile card?

Profile card is a way to showcase important details about the person in brief. In web designing a good profile card can create a good impression on the visitors eye. The more attractive the design is the more people will love it. As we all know front end development is an art. The more the art explains about itself the more your bounce rate will get lower. So before you start something big always focus on the small details of front end.

profile card

The above picture displays a brilliant design of profile card. Don’t worry if it seems hard to you, at the end of this post you will have your own professional profile card.

What is bootstrap?

Bootstrap is one of the leading css frameworks of this era. First of all its really easy to use and has many components to work with. So if you are familiar with css and want to improve your workflow then start to use bootstrap.

bootstrap

I assume that you have some basic knowledge of bootstrap like how to use bootstrap grids. For this project you will need to download bootstrap. So download it first by using the provided link. In addition to bootstrap you will also need jquery and font awesome. Therefore download them also and then move forward to write the codes.

Bootstrap cards markup

I hope you guys know how to use bootstrap. But if have not used it before then i suggest you to follow the picture.

how to use bootstrap

I hope the above info graph helps you to setup the project. So now we will need 2 other files for this project one is a html file and other one is a css file. In addition to these two you will need some pictures. Therefore create these two files and create an images folder then add some pictures. Now open the html file in any text editor and follow the given code.

<div class="col-lg-3 col-md-4 col-sm-6">
	<div class="thumbnail">				
		<div class="img-holder">
			<img src="images/image1.jpeg" alt="image 1" class="img-responsive">
		</div>
		<p><b>Shaun smith - CEO</b></p>
		<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident esse magnam, voluptatem dignissimos, et praesentium.</small>			
		<ul class="social">
			<li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
			<li><a href="#"><i class="fa fa-github"></i></a></li>
			<li><a href="#"><i class="fa fa-twitter"></i></a></li>
		</ul>
		<a href="#" class="join">ADD FRIEND</a>
	</div>
</div>

In the above piece of code i have added markup for our bootstrap cards. You have to put this code inside of a row. If you don’t know about row then follow how to use bootstrap grids first. So now our markup is ready its time to add some styles.

Bootstrap cards css

Before i start to write and explain the code part of css you guys must check how it will look like.

So guys if you have liked this project and want to continue then let’s start our css part of code. First of all i have added some basic styles to root element i.e body.

html,body {
	font-family:"Century Gothic";
	font-weight:200;
	background:#ddd;
	text-align:center;
}

It’s really simple i have just added some typography changes. So now let’s move to the inner part of cards and add some style rules.

.thumbnail {
	padding:10px 12px 12px 12px;
	margin-bottom:40px;
}
.img-holder {
	box-shadow: 8px 8px 5px #888888;
	position:relative;
	top:-20px;
	border-radius:5px;
	transition:0.3s all linear;
}
.img-holder img {
	border-radius:5px;
}

Some extra margin and padding is included in the thumbnail class. After that the image holder is styled in the way to make it look like its popping out of the main box. That’s the main part of our code while there’s some more lines to make it look more professional.

.social li a {
	background:#f8f8f8;
	padding:5px 8px;
	color:#5f8eed;
	border-radius:50%;
	box-shadow:3px 3px 5px #888888;
	transition:0.3s all linear;
}
.social li a:hover {
	background:#fff;
	color:#202020;
}

The above code makes the social links much more cool. However it’s not necessary to use exact styles so you can experiment with it a little bit. Finally i have added some styles to the link to make it look clean and modern. If you have checked my fiddle then you may see little custom java script there. That’s the part of code makes our bootstrap cards awesome.

So guys this post has come to the end. I hope you guys have enjoyed it well. So don’t forget to subscribe and get next posts,offers directly at your inbox. Your friends are interested in technology too! share our name with them.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


2 Comments

piyush kamani · December 6, 2017 at 1:24 pm

this is a superb design.

cuphead ios download · December 7, 2017 at 8:53 am

I consider something really special in this site.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us