Team Member Profile Card 4

Display a synopsis of information for team members. (Alternative Design 3)

John Doe

Position or Title

Skill 1 / Skill 2 / Skill 3 / Skill 4
Twitter: twitterHandle

Code:

<div class="row justify-content-md-center">
    <div class="col-lg-4 col-md-6">
        <div class="card bg-dark text-white">
            <!-- Heading Area (name/title) -->
            <div class="card-body">
                <div class="row">
                    <div class="col text-center">
                        <h2 class="display-4">John Doe</h2>                    
                        <p>Position or Title</p>
                    </div>
                </div>                
            </div>
            <!-- Description Area (skills and social links) -->
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        Skill 1 / Skill 2 / Skill 3 / Skill 4
                        <div class="progress">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>                                               
                    </div>
                </div>                
            </div>
            <div class="card-body text-center">
                <strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
            </div>
        </div>
    </div>
</div>