bs4 vertical user profile cover

This bootstrap snippet called "bs4 vertical user profile cover" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user,profile,cover,social-network

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="ui-bg-cover ui-bg-overlay-container text-white" style="background-image: url('https://uxpowered.com/products/appwork/v110/assets_/img/bg/2.jpg');">
        <div class="ui-bg-overlay bg-dark opacity-50"></div>

        <div class="container">
          <div class="text-center py-5">
            <img src="https://uxpowered.com/products/appwork/v110/assets_/img/avatars/6.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">Mae Gibson</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">
              <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>
        </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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

.text-white {
    color: #fff !important;
}
.ui-bg-overlay-container, .ui-bg-video-container {
    position: relative;
}
.ui-bg-cover {
    background-color: transparent;
    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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Thursday September 13, 21:48

Views: 1