hugo-academic/layouts/_default/bio.html

<div class="row">
    <div class="col-xs-12 col-md-4">

        <div id="profile">
            <div class="portrait"></div>
            <div class="portrait-title">

                <h2>{{ .Site.Params.name }}</h2>
                <h3>{{ .Site.Params.role }}</h3>
                <h3>{{ .Site.Params.organization }}</h3>

            </div>

            <ul class="list-inline social-icon">
                {{ range .Site.Params.contact.social }}

                <li>
                    <a href="{{ .link }}">
                    {{ if eq .icon_pack "ai" }}
                        <i class="ai ai-{{ .icon }} big-icon" aria-hidden="true"></i>
                    {{ else }}
                        <i class="fa fa-{{ .icon }} big-icon" aria-hidden="true"></i>
                    {{ end }}
                    </a>
                </li>
                {{ end }}

            </ul>

        </div>
    </div>

    <div class="visible-sm visible-xs"></div>

    <div class="col-xs-12 col-md-8" id="bio">

        {{ .Content }}

        <div class="row">

            <div class="col-md-5">
                <h2>Interests</h2>
                <ul>
                    {{ range .Site.Params.interests }}
                    <li>{{ . }}</li>
                    {{ end }}
                </ul>
            </div>

            <div class="col-md-7">
                <h2>Education</h2>
                <ul class="ul-edu fa-ul">
                    {{ range .Site.Params.education }}
                    <li>
                        <i class="fa-li fa fa-graduation-cap"></i>
                        <div class="description">
                            <p class="course">{{ .course }}, {{ .year }}</p>
                            <p class="institution">{{ .institution }}</p>
                        </div>
                    </li>
                    {{ end }}
                </ul>
            </div>

        </div>

    </div>
</div>