Tabs

<ul class="nav nav-tabs lavalamp" id="component-1" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#component-1-1" role="tab" aria-controls="component-1-1" aria-selected="true">First Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#component-1-2" role="tab" aria-controls="component-1-2" aria-selected="false">Second Tab</a>
  </li>
</ul>
<div class="tab-content" id="component-1-content">
  <div class="tab-pane fade show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
  </div>
  <div class="tab-pane fade" id="component-1-2" role="tabpanel" aria-labelledby="component-1-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-lg-3">
    <ul class="nav nav-tabs flex-column lavalamp" id="component-2" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#component-2-1" role="tab" aria-controls="component-2-1" aria-selected="true">First Tab</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#component-2-2" role="tab" aria-controls="component-2-2" aria-selected="false">Second Tab</a>
      </li>
    </ul>
  </div>
  <div class="col-md-8 col-lg-9">
    <div class="tab-content" id="component-2-content">
      <div class="tab-pane fade show active" id="component-2-1" role="tabpanel" aria-labelledby="component-2-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
      </div>
      <div class="tab-pane fade" id="component-2-2" role="tabpanel" aria-labelledby="component-2-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
      </div>
    </div>
  </div>
</div>

<ul class="nav nav-pills lavalamp" id="component-3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#component-3-1" role="tab" aria-controls="component-3-1" aria-selected="true">First Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#component-3-2" role="tab" aria-controls="component-3-2" aria-selected="false">Second Tab</a>
  </li>
</ul>
<div class="tab-content" id="component-3-content">
  <div class="tab-pane fade show active" id="component-3-1" role="tabpanel" aria-labelledby="component-3-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
  </div>
  <div class="tab-pane fade" id="component-3-2" role="tabpanel" aria-labelledby="component-3-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-lg-3">
    <ul class="nav nav-pills flex-column lavalamp" id="component-4" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#component-4-1" role="tab" aria-controls="component-4-1" aria-selected="true">First Tab</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#component-4-2" role="tab" aria-controls="component-4-2" aria-selected="false">Second Tab</a>
      </li>
    </ul>
  </div>
  <div class="col-md-8 col-lg-9">
    <div class="tab-content" id="component-4-content">
      <div class="tab-pane fade show active" id="component-4-1" role="tabpanel" aria-labelledby="component-4-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
      </div>
      <div class="tab-pane fade" id="component-4-2" role="tabpanel" aria-labelledby="component-4-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
      </div>
    </div>
  </div>
</div>