Character Warning (bs)

<div class="container-fluid my-1" style="color:#ffffff;width:1000px;">
<!--Main warning box-->
  <div class="card bg-danger rounded-0" style="border-top-right-radius:15px; border-top-left-radius:15px; height:50px;">
  <p style="font-size: 30px; text-align: center; letter-spacing: 2px"> <i class="fad fa-exclamation-triangle"></i>&nbsp;<strong>CONTENT WARNING</strong>&nbsp;<i class="fad fa-exclamation-triangle"></i></p>
  </div>
    <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">
<!--Disclaimer + list-->
    <p style="text-align: left; font-size: 16px;">When you view this character, make sure to expect...</p>
    <ul class="text-info" style="list-style-type: circle; font-size: 15px;">
     <li>something that may be sensitive content</li>
     <li>anything that you think may upset someone</li>
     <li>list them here basically</li>
     <li>and yes the box scrolls</li>
    </ul>
    </div>
     <div class="row">
<!--Allowed box-->
      <div class="col-6">
       <div class="card bg-success rounded-0 mt-2" style="height:50px;">
<!--Disclaimer + list-->
       <p style="font-size: 30px; text-align: center;"> <i class="fad fa-check-circle"></i>&nbsp;<strong>Stuff I allow</strong>&nbsp;<i class="fad fa-check-circle"></i></p>
       </div>
       <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">
       <ul style="list-style-type: circle; font-size: 15px;">
        <li>something you are okay with</li>
        <li>people doing with this character</li>
        <li>and of course the box scrolls</li>
       </ul>
       </div>
      </div>
<!--Unpermitted box-->
      <div class="col-6">
       <div class="card bg-warning rounded-0 mt-2" style="height:50px;">
<!--Disclaimer + list-->
       <p style="font-size: 30px; text-align: center;"> <i class="fad fa-times-circle"></i>&nbsp;<strong>Stuff I don't encourage</strong>&nbsp;<i class="fad fa-times-circle"></i></p>
       </div>
        <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">
        <ul style="list-style-type: circle; font-size: 15px;">
         <li>things that you do not want from your character</li>
         <li>maybe if someone draws them or something</li>
         <li>same case, box scrolls</li>
        </ul>
        </div>
       </div>
     </div>
<!--Etc box-->
     <div class="card bg-secondary rounded-0 mt-2" style="height:50px;">
     <p style="font-size: 30px; text-align: center;"><i class="fad fa-plus-square"></i>&nbsp;<strong>OTHER INFO...</strong>&nbsp;<i class="fad fa-plus-square"></i></p>
     </div>
     <div class="card rounded-0 p-2 bg-faded" style="max-height:200px; overflow:auto; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">
<!--Extra info area-->
      <p style="text-align: justify; font-size: 15px;" class="my-1 p-1"><span>Some other brief things that you would like to note about this character. Maybe details you couldn't include that are VERY important (not) to be drawn. Box does indeed scroll</span></p>
     </div>
<!--Code credit (don't remove pls and ty)-->
      <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
    </div>