Bootstrap html snippet. bs4 social profile cover

HTML code

Clean, semantic HTML that powers this Bootstrap 4.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="ui-bg-cover ui-bg-overlay-container text-white">
    <div class="ui-bg-overlay bg-dark opacity-50"></div>
    <div class="container">
      <div class="d-flex justify-content-between align-items-center pt-4">
        <div>
          <a href="javascript:void(0)" class="d-inline-block text-white">
            <strong>234</strong>
            <span class="opacity-75">followers</span>
          </a>
          <a href="javascript:void(0)" class="d-inline-block text-white ml-3">
            <strong>111</strong>
            <span class="opacity-75">following</span>
          </a>
        </div>
        <div>
          <a href="javascript:void(0)" class="btn btn-success btn-sm">
            Follow
          </a>
          <a href="javascript:void(0)" class="btn btn-outline-white icon-btn btn-sm ml-1">
            <i class="ion ion-md-mail"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="text-center py-5">
        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="ui-w-100 rounded-circle">

        <div class="col-md-8 col-lg-6 col-xl-5 p-0 mx-auto">
          <h4 class="font-weight-bold my-4">John Doe</h4>

          <div class="opacity-75 mb-4">
            Lorem ipsum dolor sit amet, nibh suavitate qualisque ut nam. Ad harum primis electram duo, porro principes ei has.
          </div>
        </div>

        <div class="text-center pt-3">
          <a href="javascript:void(0)" class="btn icon-btn btn-twitter btn-round">
            <span class="ion ion-logo-twitter"></span>
          </a>
          &nbsp;
          <a href="javascript:void(0)" class="btn icon-btn btn-facebook btn-round">
            <span class="ion ion-logo-facebook"></span>
          </a>
          &nbsp;
          <a href="javascript:void(0)" class="btn icon-btn btn-instagram btn-round">
            <span class="ion ion-logo-instagram"></span>
          </a>
        </div>
      </div>
    </div>

    <div class="ui-bg-overlay-container">
      <div class="ui-bg-overlay bg-dark opacity-25"></div>
      <ul class="nav nav-tabs tabs-alt justify-content-center border-transparent">
        <li class="nav-item">
          <a class="nav-link text-white py-4 active" href="javascript:void(0)">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Likes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Followers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white py-4" href="javascript:void(0)">Following</a>
        </li>
      </ul>
    </div>

</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 4.1.1 to keep the design, spacing, and responsiveness consistent.

.text-white {
    color: #fff !important;
}
.ui-bg-overlay-container, .ui-bg-video-container {
    position: relative;
}
.ui-bg-cover {
    background-color:#00b5ec;
    background-position: center center;
    background-size: cover;
}
.ui-bg-overlay-container .ui-bg-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}

.bg-dark {
    background-color: rgba(24,28,33,0.9) !important;
}
.opacity-50 {
    opacity: .5 !important;
}
.bg-dark {
    background-color: rgba(24,28,33,0.9) !important;
}
.ui-bg-overlay-container>*, .ui-bg-video-container>* {
    position: relative;
}
@media (min-width: 992px){
    .container, .container-fluid {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
.media, .media>:not(.media-body), .jumbotron, .card {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.d-flex, .d-inline-flex, .media, .media>:not(.media-body), .jumbotron, .card {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.ui-w-100 {
    width: 100px !important;
    height: auto;
}
.font-weight-bold {
    font-weight: 700 !important;
}
.opacity-75 {
    opacity: .75 !important;
}
.tabs-alt.nav-tabs .nav-link.active, .tabs-alt.nav-tabs .nav-link.active:hover, .tabs-alt.nav-tabs .nav-link.active:focus, .tabs-alt>.nav-tabs .nav-link.active, .tabs-alt>.nav-tabs .nav-link.active:hover, .tabs-alt>.nav-tabs .nav-link.active:focus {
    -webkit-box-shadow: 0 -2px 0 #26B4FF inset;
    box-shadow: 0 -2px 0 #26B4FF inset;
}

.nav-tabs:not(.nav-fill):not(.nav-justified) .nav-link, .nav-pills:not(.nav-fill):not(.nav-justified) .nav-link {
    margin-right: .125rem;
}
.nav-tabs.tabs-alt .nav-link, .tabs-alt>.nav-tabs .nav-link {
    border-width: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: #fff;
}