Warning 3 (Bootstrap)

<!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service --

Version: 1.0

Default Colours
-Important White: #FFFFFF
-Important Black: #000000
-Font Awesomes: fa-warning

Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)

Thank you for reading!
Crispin

-->

<div class="mb-3 p-0" style="border:#000000 8px solid;">
    <div class="card rounded-0" style="background:url([IMGHEADER]); background-position:center; background-size:cover; border:none;"><p class="display-4 text-center text-white m-1 p-3" style="background:rgba(0,0,0,0.7);"><i class="fas fa-warning"></i> WARNING <i class="fas fa-warning"></i></p></div>
  </div>

<div class="col-12 card bg-dark p-0" style="border:#000000 8px solid;">
  <div class="col-12 m-0 p-3 row no-gutters text-center">

    <div class="col-sm-2 d-none d-lg-block order-1">
      <div class="h-100" style="background:url([IMGLEFT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
    </div>

    <div class="col-sm-2 d-none d-lg-block order-3">
      <div class="h-100" style="background:url([IMGRIGHT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
    </div>

    <!-------- Start Main Warning -------->
    <div class="col-lg-8 col-12 order-2 text-white p-2">
      <div style="font-size:1.2rem;">
      <p>Warning! This character has content some viewers may find disturbing. You may click the buttons below for a full list of content found within this character's page, plus how the content manifests and or is utilised within the character's lore.</p>
      <p>THIS IS YOUR FINAL WARNING.</p>
      <p>(All images are marked accordingly.)</p>
      </div>
      <hr class="bg-danger mt-3 mb-2"><hr class="bg-danger mt-1 mb-2">

      <!--- Start Implied List --->
      <p><a href="#implied" data-toggle="collapse"><span class="badge badge-danger m-1 p-3 rounded-0" style="font-size:1rem;">Implied Content</span></a>
      <div class="collapsed collapse px-3" id="implied"></p>
        <p class="pb-3">Implied Content, in this case, is defined as any content or themes that may be sensitive to some viewers, but could have plausible deniability of existing within the work. The content is buried by subtext, left often unspoken of, or is hidden by allegory.</p>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTIMPLIED]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTIMPLIED]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTIMPLIED]</span>
        <hr class="bg-danger mt-3 mb-2"><hr class="bg-danger mt-1 mb-2">
      </div>
      <!--- End Implied List --->

      <!--- Start Descriptive List --->
      <p><a href="#descriptive" data-toggle="collapse"><span class="badge badge-danger m-1 p-3 rounded-0" style="font-size:1rem;">Descriptive Content</span></a>
      <div class="collapsed collapse px-3" id="descriptive"></p>
        <p class="pb-3">Descriptive Content, in this case, is defined as any content or themes that may be sensitive to some viewers and is specifically stated or mentioned outright in a character's biography.</p>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTDESCIPTIVE]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTDESCIPTIVE]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTDESCIPTIVE]</span>
        <hr class="bg-danger mt-3 mb-2"><hr class="bg-danger mt-1 mb-2">
      </div>
      <!--- End Descriptive List --->

      <!--- Start Descriptive List --->
      <p><a href="#visual" data-toggle="collapse"><span class="badge badge-danger m-1 p-3 rounded-0" style="font-size:1rem;">Visual Content</span></a>
      <div class="collapsed collapse px-3" id="visual"></p>
        <p class="pb-3">Visual Content, in this case, is defined as any content or themes that may be sensitive to some viewers and is specifically shown visually within a character's gallery.</p>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTVISUAL]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTVISUAL]</span>
        <span class="badge badge-danger m-1 p-2 rounded-0" style="font-size:1rem;">[TEXTVISUAL]</span>
        <hr class="bg-danger mt-3 mb-2"><hr class="bg-danger mt-1 mb-2">
      </div>
      <!--- End Descriptive List --->

    </div>
    <!-------- End Main Warning -------->

  </div>
</div>

<div class="col-12 mt-3 py-2 bg-danger text-center" style="font-size:1.2rem; border:#000000 8px solid;">
  <a href="[IMGLEFT]" data-toggle="tooltip" title="Left Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
  <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-warning fa-flip-horizontal"></i></span></a>
  <a href="https://toyhou.se/31184775.warning-3" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-code"></i></span></a>
  <a href="[IMGHEADER]" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-warning"></i></span></a>
  <a href="[IMGRIGHT]" data-toggle="tooltip" title="Right Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
</div>

<!--
[IMGHEADER]
[IMGLEFT] | [IMGRIGHT]
[TEXTIMPLIED] | [TEXTDESCRIPTIVE] | [TEXTVISUAL]
-->