Contenu 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Contenu 3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Mise en place

<style>
.tab-content div.container { padding-top: 8px; }
ul.nav-tabs { padding-bottom: 0px; }
li.nav-item { margin-left: 0; }
</style>

<div class="width60 marginAuto">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">Onglet 1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Onglet 2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Onglet 3</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu4">Mise en place</a></li>
  </ul>

  <div class="tab-content">
    <div class="container tab-pane active" id="menu1">
      <h2>Contenu 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="container tab-pane fade" id="menu2">
      <h2>Contenu 2</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="container tab-pane fade" id="menu3">
      <h2>Contenu 3</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>

    <div class="container tab-pane fade" id="menu4">
      <h2>Mise en place</h2>
      <p><strong>On ne peut plus simple, il suffit d'examiner le code de cet article.</strong></p>
    </div>
    
  </div>
</div>