How do I use this Bootstrap snippet?

Load Bootstrap 4.1.1, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 4.1.1 and inherits its responsive grid and components.

Bootstrap html snippet. bs4 simple profile header

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="container bootstrap-snippet header-container">
    <div class="bg-white">
      <div class="container py-5">
        <div class="media col-md-10 col-lg-8 col-xl-7 p-0 my-4 mx-auto">
          <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt class="d-block ui-w-100 rounded-circle">
          <div class="media-body ml-5">
            <h4 class="font-weight-bold mb-4">John Doe</h4>
            <div class="text-muted mb-4">
              Lorem ipsum dolor sit amet, nibh suavitate qualisque ut nam. Ad harum primis electram duo, porro principes ei has.
            </div>
            <a href="#" class="d-inline-block text-dark">
              <strong>234</strong>
              <span class="text-muted">followers</span>
            </a>
            <a href="#" class="d-inline-block text-dark ml-3">
              <strong>111</strong>
              <span class="text-muted">following</span>
            </a>
          </div>
        </div>
      </div>
      <hr class="m-0">
      <ul class="nav nav-tabs tabs-alt justify-content-center">
        <li class="nav-item">
          <a class="nav-link py-4 active" href="#">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link py-4" href="#">Likes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link py-4" href="#">Followers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link py-4" href="#">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.

body{
    background:#00b5ec;    
}
.header-container{
    margin-top:20px;    
}
.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;
}