Sticky Tabs (code)

<!--
  Code Name: Sticky tabs
  Creator: _featherweather / a-brilliant-loser
  Date: 17 Feb 2019

  Notes: i was coding in my hotel room last night and gave up the original idea lol. instead, have a basic tab container.
  colors can be customized (i use #333 as the header)
  defaults to small-caps for the tabs and centered for the tabs (remove by taking out the "text-center" bit from the column class)
  You CAN use this code in conjunction with other codes so long as the other coder gives the OK for fraknencoding.
-->

<div class="container-fluid">

  <div class="sticky-top card-header" style="font-variant:small-caps; background-color: #333">
    <ul class="nav nav-pills justify-content-center">
      <li class="nav-item"><a class="nav-link p-2 active" data-toggle="tab" href="#tabONE">Tab One</a></li>
      <li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#tabTWO">Tab Two</a></li>
      <!-- copy code below and change href="#THIS" to add more tabs! -->
      <!--
      <li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#THIS">Tab Name</a></li>
      -->
    </ul>
  </div>

  <!-- credits, -->
  <div class="fixed-bottom"><p align="right"><a href="https://toyhou.se/a-brilliant-loser" title="_featherweather's codes" data-toggle="tooltip" data-placement="top" ><i class="fa fa-user-secret"></i></a></p></div>


  <div class="row">
    <div class="col-md-9 text-center"  style="width:75em;margin:0 auto;display: inline-block">
      <div class="tab-content">
        <!-- tab one -->
        <div class="tab-pane fade show active" id="tabONE">
          <!-- edit content of this area -->
          <h1><u>d=The First Tab</u></h1>
          <p>hello!</p>
        </div>
        <!-- tab two -->
        <div class="tab-pane fade" id="tabTWO">
          <!-- edit contents of this area -->
          <h1><u>And a Second Tab</u></h1>
          <p>just a lot of random stuff to type here</p>
        </div>
        <!-- copy code below and change id="THIS" to create more tabs! -->
        <!--
        <div class="tab-pane fade" id="THIS">
          <h1><u>And another Tab</u></h1>
          <p>just a lot of random stuff to type here</p>
        </div>
        -->
      </div> <!-- end tab-content -->
    </div> <!-- end col -->
  </div> <!-- end row -->
</div> <!-- end container -->