How to Create User Profile Card Widget with Bootstrap?

Bootstrap has more powerful components than the previous version 3. Undoubtedly card component is one of the stylish and mobile friendly one among others. Basically you can mix and match the cards to create different types of widgets. In this article let us discuss, how to create a Bootstrap user profile card widget. We use Bootstrap version 4 and you can download all files needed for this widget here.

How it Looks?

Below is how the widget will look and you can customize the colors and look as per your need with the default background color properties.

The widget has the following parts:

Name, profile, skills and platform details
Profile picture
Three social profile details (you can use for different purposes as well)

Let us Create the Widget

Below is the complete code for the widget.

<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<div class="row">
<div class="col-md-8 col-sm-8">
<h2 class="card-title">Name: Stffanie Osterich</h2>
<p class="card-text"><strong>Profile: </strong> Web Developer </p>
<p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p>
<p><strong>Platform: </strong>
<span class="badge bg-primary">WordPress</span> 
<span class="badge bg-info">Weebly</span>
<span class="badge bg-warning">Bootstrap</span>
<span class="badge bg-success">Wix</span>
</p>
</div>
<div class="col-md-4 col-sm-4 text-center">
<img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;">
</div>         
<div class="col-md-4 col-sm-4 text-center">
<h2><strong> 5.2K </strong></h2>                    
<p><small>Fans</small></p>
<button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like  </button>
</div>
<div class="col-md-4 col-sm-4 text-center">
<h2><strong>1.4K</strong></h2>                    
<p><small>Following</small></p>
<button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button>
</div>
<div class="col-md-4 col-sm-4 text-center">
<h2><strong>3.8K</strong></h2>                    
<p><small>Followers</small></p>
<button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button>  
</div>
</div>
</div>
</div>
</div>
</div> 
</div>

The first three div tags with “container-fluid”, “row” and “col-12” are ideally not required for a single widget. But we used to ensure that the widget can be inserted anywhere in-between the Bootstrap layout with appropriate margins.

The main part of widget is basically a card component with sub-sections. We have used default card with “inverse-card” and use inline style for assigning background and border colors as #333. Next is a “card-block” section with a “row” element divided into grids like below:

Basically there are 5 grids, one with “col-md-8 col-sm-8” and the remaining are with “col-md-4 col-sm-4” classes to split the area. The top section has 8+4 grids and the bottom social section has 4+4+4 grids.

Note, we have used “md” and “sm” in the grid classes as “col-md-8” and “col-sm-8”. This will create the breakpoints on medium and small devices to have responsiveness.

Now the basic layout is ready and the next step is to add content and beautify it.

Top Section

Under first col-8 section, you can add “card-title” and “card-text” as name and profile details. The platform section uses default badge component to highlight the tags in different color.
The second col-4 section has a profile picture image with the size as 128×128 pixels.

Bottom Section

Bottom section has three “col-4” sections having social profile links and description.

Additional CSS

You should include the CDN link of the font awesome icons in order to show the icons on the buttons. Also we have customized the button element using additional CSS:

<style>
.btn{
border-radius: 0;
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 0;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
cursor: pointer;
} 
</style>

The same CSS class is used with profile image picture to have shadow effect and the inline style “border-radius:50%” is used on the profile picture to change it to circle shape.

Variations

You can create different styles of user profile cars by mixing and matching of colors and grid layout. Below are some of the possibilities shown for example:

How to Create User Profile Card Widget with Bootstrap?