Coder's Description (Bootstrap)

<!----------- START TOP SECTION ----------->
<div class="col-12 p-0 bg-faded text-center" style="border:#000000 4px solid;">

  <!----------- Start Description Box ----------->
  <div class="card m-0 p-3 justify-content-center rounded-0" style="border:#000000 4px solid;">
    <p class="display-4 text-center text-primary" style="letter-spacing:2px;">TITLE</p>
    <div class="row">

      <!----------- Start Link Buttons ----------->
      <div class="col-12 col-lg-6">
        <h1 class="text-uppercase text-primary text-center">SOURCE-CODE</h1>
        <div class="col-12 mb-2 pb-3 p-0 text-center">
          <div class="col-12 row no-gutters">

            <!--- First two are primary coloured and are implied to have content when clicked -->
            <a class="btn btn-block btn-primary nav-link mx-2 my-1 border-0 rounded-0" href="???">Bootstrap</a>
            <a class="btn btn-block btn-primary nav-link mx-2 my-1 border-0 rounded-0" href="???">Custom Colours</a>

            <!--- This button is primary-outlined coloured and is implied to not have content when clicked -->
            <a class="btn btn-block btn-outline-primary nav-link mx-2 my-1 rounded-0" href="???">Bootstrap With Highlight</a>
          </div>
        </div>
      </div>
      <!----------- End Link Buttons ----------->

      <!----------- Start Code Description ----------->
      <div class="col-12 col-lg-6">
        <h1 class="text-uppercase text-primary text-center">ABOUT</h1>
        <div class="col-12 row mb-2 pb-3 p-0 text-center">
          <div class="col-12 m-2">
            <p>Hi! This template is LITERALLY the template for the new thing I'm putting at the top of all my codes. I make everything I use, so if you wanna get into coding and don't wanna code your own "get my codes and links and stuff" thing, then here you go!</p>
            <p>LATEST VERSION: 1.0</p>
            <p><a href="#">CHARACTER USED: JOE BLOGGS</a></p>
          </div>
        </div>
      </div>
      <!----------- End Code Description ----------->

    </div>
    <a href="https://toyhou.se/31126817.coders-description" data-toggle="tooltip" title="Top-Section Code By: TomcatCodes / CrispinAsheYA"><i class="fas fa-code"></i></a>
  </div>
  <!----------- End Description Box ----------->

  <!----------- Start Tab Buttons ----------->
  <div class="col-12 m-0 p-0" style="position:sticky;top:0px;z-index:100;">
    <div class="col-12 p-0 m-0 text-center">
      <ul class="nav nav-tabs card-header-tabs text-center row p-0 m-0">
        <li class="col-4 bg-primary nav-item p-0 m-0"><a class="nav-link px-0 text-white rounded-0" data-toggle="tab" href="#BS" style="border:#000000 4px solid; border-radius:0px;">Bootstrap</a></li>
        <li class="col-4 bg-primary nav-item p-0 m-0"><a class="nav-link px-0 text-white rounded-0" data-toggle="tab" href="#CC" style="border:#000000 4px solid; border-radius:0px;">Custom Colours</a></li>
        <li class="col-4 bg-primary nav-item p-0 m-0"><a class="nav-link px-0 text-white rounded-0" data-toggle="tab" href="#BSWH" style="border:#000000 4px solid; border-radius:0px;">Bootstrap With Highlight</a></li>
      </ul>
    </div>
  </div>
  <!----------- End Tab Buttons ----------->

</div>
<!----------- END TOP SECTION ----------->

<!--- SEPERATOR --->
<div class="card bg-transparent mt-2 rounded-0" style="height:10px; width:100%; border-style:double; border-width:8px; border-left:none; border-right:none;"></div>


<!----------- START WHERE YOU PUT YOUR SOURCE CODES ----------->
<!--- (NOTE: This section is specifically not indented as to make copying and pasting codes with accurate indents easier) --->

<div class="tab-content">

<!------- BS GO HERE ------->
<div class="tab-pane active show py-3" id="BS">

Bootstrap

</div>

<!------- CC GO HERE ------->
<div class="tab-pane fade py-3" id="CC">

Custom Col

</div>

<!------- BSWH GO HERE ------->
<div class="tab-pane fade py-3" id="BSWH">

BSWH

</div>
</div>
<!----------- END WHERE YOU PUT YOUR SOURCE CODES ----------->