<div class="container">
  <h1>Bootstrap 4 Tab Panel Header</h1>


  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="home" aria-expanded="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-controls="profile">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-controls="profile">Tab 3</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="1-tab">

      <div class="tab-pane-header">
        <h2>Navivation Title (Nav-Tab 1)</h2>
        <h5>Navigation subtitle</h5>
        <p class="lead">
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum vero magni suscipit, fuga repellat quaerat eius minima vel, distinctio dignissimos labore esse harum, consequatur rem explicabo molestias aliquid saepe autem?</div>
        </p>
        <a href="#tab1" target="_blank">Link directly to this tab</a>

      </div>

      <p>1: Additional information Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci excepturi quo aut, maiores saepe aperiam suscipit sed! Amet sed nam ipsam qui at numquam similique esse cupiditate accusamus. Eum, reprehenderit?</p>


    </div>
    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="2-tab">

      <div class="tab-pane-header">
        <h2>Navivation Title (Nav-Tab 2)</h2>
        <h5>Navigation subtitle</h5>
        <p class="lead">
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum vero magni suscipit, fuga repellat quaerat eius minima vel, distinctio dignissimos labore esse harum, consequatur rem explicabo molestias aliquid saepe autem?</div>
        </p>
        <a href="#tab2" target="_blank">Link directly to this tab</a>
      </div>
      <p>2: Additional information Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci excepturi quo aut, maiores saepe aperiam suscipit sed! Amet sed nam ipsam qui at numquam similique esse cupiditate accusamus. Eum, reprehenderit?</p>

    </div>
    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="3-tab">

      <div class="tab-pane-header">
        <h2>Navivation Title (Nav-Tab 3)</h2>
        <h5>Navigation subtitle</h5>
        <p class="lead">
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum vero magni suscipit, fuga repellat quaerat eius minima vel, distinctio dignissimos labore esse harum, consequatur rem explicabo molestias aliquid saepe autem?</div>
        </p>
        <a href="#tab3" target="_blank">Link directly to this tab</a>
      </div>

      <p>3: Additional information Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci excepturi quo aut, maiores saepe aperiam suscipit sed! Amet sed nam ipsam qui at numquam similique esse cupiditate accusamus. Eum, reprehenderit?</p>

    </div>
  </div>


</div>
<!-- /.container -->
.nav-tabs {
  border-bottom:none;
}



.nav-tabs .nav-link.active {
  background-color:#e2e2e2;
  border-bottom:#e2e2e2;
  font-weight: bold;
}

.tab-pane.active .tab-pane-header {
  padding:2rem;
  background-color:#e2e2e2;
  border-top-right-radius: .5rem;
  border-top-left-radius: .5rem;
  margin-bottom:1rem;
}

.tab-pane:first-child .tab-pane-header {
  border-top-left-radius: 0;
}
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready

  
   if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
      return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
  
  
// document ready  
});



External CSS

  1. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js