Profile cards are one of the most popular way to showcase user details. Almost all of the social sites use them. In this post, I will show you how to create a beautiful profile card in Bootstrap 4. I will use Bootstrap 4 card component which is a successor of Bootstrap 3 panels, wells and thumbnails and is much more flexible and extensible. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

In this guide, I assume that you are familiar with Bootstrap 4 and know how to setup Bootstrap 4 project. If you didn't use Bootstrap 4 before, then I suggest you to read our guide What is Bootstrap 4 and how to get started.

Profile card HTML markup

Open your favorite editor and create two files index.html and styles.css. We will use index.html for HTML markup and styles.css for custom CSS. Now open the HTML file and start typing following:

<!DOCTYPE html>
<html lang='en'>
<head>
    <!--required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Add FontAwesome icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Add Boostrap 4 default stylesheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <!-- our custom css -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="row">
    <div class="container">
        <div class="col-md-4 mx-auto">
            <div class="card">
                <!-- user profile image -->
                <img class="card-img-top" src="profile.jpg" alt="Profile">
                <div class="card-body text-center">
                    <!-- user name -->
                    <h4 class="card-title">John Doe</h4>
                    <!-- job title / comany name -->
                    <p class="card-text text-muted">UI/UX Designer</p>
                    <!-- social profile links -->
                    <a href="#" class="social twitter"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="social facebook"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="social google-plus"><i class="fa fa-google-plus"></i></a>
                    <a href="#" class="social linkedin"><i class="fa fa-linkedin"></i></a>
                    <!-- CTA button -->
                    <p class="mt-4"><a href="#" class="btn btn-primary">Contact me!</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Let's have a close look at above code snippet. In <head> section, we first added meta tags which are required by the browsers to render the HTML page. We then imported FontAwesome icons which are used for porfile social icons. At the bottom, we linked Bootstrap 4 and our custom styleshets.

In <body> section, we put card HTML markup inside the grid. .row and .container classes are provided by Bootstrap 4 to layout and align content. Since, our markup is ready, it is a time to start adding styles.

Profile card CSS

Before I start adding and explaining styles, first check how our final card design will look like:

Profile demo

We are not going to add any magic here. Bootstrap 4 already includes styles for card component. We will only add styles for social icons and root element. Let's first add some basic styles to <body> tag:

body {
    background-color: #007bff;
    text-align: center;
    padding: 50px;
}

I only added background color and some paddings <body> tag to make our card component prominent. Now, let's style our social icons:

a.social {
    border-radius: 50%;
    color: #fff;
    padding: 4px 7px;
}

a.social .fa {
    height: 16px;
    width: 16px;
}

a.social.twitter {
    background-color: #00aced;
}

a.social.facebook {
    background-color: #3b5998;
}

a.social.google-plus {
    background-color: #dd4b39;
}

a.social.linkedin {
    background-color: #007bb6;
}

The above code makes social icons much more cool. I have added background color to social icons. However, it is not always required. You can keep background color white and add foreground color instead. It's your choice.

Following is the live preview of Bootstrap 4 profile card:

Bootrsrap 4 Profile Card

Conclusion

That's all folks for creating profile card in Bootstrap 4. If you want to play with some sophisticated profile card examples (background images, videos etc.), checkout our free Card template. Simply download it and start customizing background images, colors or video links to see how it works.

Don't forget to subscribe to our Weekly Design newsletter to get weekly recap of best design articles, resources and jobs every Monday 10am. Find this article useful? Share it with your friends and followers below.