People

This section is useful to present people.

Code

<!--People-->
<section class="page-section alternate-bg">
    <div class="container">
        <div class="heading-container text-center">
            <h2 class="section-heading text-uppercase">Heading</h2>
            <h3 class="section-subheading text-muted">Sub-heading.</h3>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="person">
                    <img class="mx-auto rounded-circle" src="/assets/img/team/default.png" alt="Profile photo"/>
                    <h4 class="caption-heading">Dr John Smith</h4>
                    <p class="caption-subheading text-muted">Manager of leisure activities @ Lincoln Agri-Robotic</p>
                    <a class="btn btn-dark btn-social mx-2" aria-title="Profile" href="/team/john_smith.html"><i class="fas fa-user"></i></a>
                    <a class="btn btn-dark btn-social mx-2" aria-title="Linkedin profile" href="https://linkedin.com/john-smith-12345678"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="person">
                    <img class="mx-auto rounded-circle" src="/assets/img/team/default.png" alt="Profile photo"/>
                    <h4 class="caption-heading">Dr Jane Doe</h4>
                    <p class="caption-subheading text-muted">Assistant reasearcher @ IML</p>
                    <a class="btn btn-dark btn-social mx-2" aria-title="Profile" href="/team/jane_doe.html"><i class="fas fa-user"></i></a>
                    <a class="btn btn-dark btn-social mx-2" aria-title="Linkedin profile" href="https://linkedin.com/jane-doe-12345678"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

Output

Customization

The photo, name and caption should be easily customizable. Note: the photo should be squared with the subject centered.

The buttons at the bottom can are just icons inside a link with some additional classes. You can add, remove or change them freely.