Aside [Bootstrap Colors]

<div class="container" style="margin-top:150px;">



    <!-------------------------------------------- Header Code Start --->
  <div class="bg-info px-3">
    <div class="row no-gutters">



            <img src="https://via.placeholder.com/200"
      style="max-height: 200px; margin-top: -120px;padding:9px;" class="d-block mx-auto rounded-circle card border-0 bg-info">

    <div class="container col">
    <h2 class="ml-5 col-12" style="font-size:44px;margin-top:15px;font-variant:small-caps">Short quote here...</h2>
    </div>

   </div>
 </div>
    <!-------------------------------------------- Header Code End --->

<div class="row">

    <!-------------------------------------------- Side Table Start --->
<div class="py-3 col-lg-3 col-sm-12">
 <table class="container table-striped border-0">
   <tr>
     <td class="pl-3"><i class="fal fa-edit mr-3"></i>Name</td>
     <td class="pull-right pr-2">Content</td>
   </tr>

   <tr>
     <td class="pl-3"><i class="fal fa-venus-mars pr-2 mr-1"></i>Pronouns</td>
     <td class="pull-right pr-2">Content</td>
   </tr>

   <tr>
     <td class="pl-3"><i class="fal fa-calendar mr-3"></i>Age</td>
     <td class="pull-right pr-2">Content</td>
   </tr>

   <tr>
     <td class="pl-3"><i class="fal fa-ruler mr-3"></i>Height</td>
     <td class="pull-right pr-2">Content</td>
   </tr>


   <tr>
     <td class="pl-3"><i class="fal fa-dna mr-3"></i>Race/Species</td>
     <td class="pull-right pr-2">Content</td>
   </tr>

   <tr>
     <td class="pl-3"><i class="fad fa-gears mr-3"></i>Role</td>
     <td class="pull-right pr-2">Content</td>
   </tr>

   <tr>
     <td class="pl-3"><i class="fal fa-compact-disc mr-3"></i>Theme</td>
     <td class="pull-right pr-2"><a href="song_link" class="text-info">Song Name</a></td>
   </tr>

 </table>
<div class="mt-2">
    <img src="https://via.placeholder.com/300x100" style="max-height:100px;" class="hidden-sm-down">

</div>


</div>

    <!-------------------------------------------- Side Table End --->

<div class="py-3 col-lg-6 col-sm-12">
    <div class="container bg-faded py-2" style="height:358px">

        <h1 style="font-variant:small-caps;font-size:32px;margin-left:60px;">summary</h1>
        <div class="row no-gutters">
            <h1><i class="text-info fa-solid fa-star ml-3"></i></h1><hr class="col-10 rounded bg-info" style="border-width:5px;">
        </div>

    <div class="card border-0 p-3 mx-3" style="max-height:200px;overflow:auto;scrollbar-width:none;">
        <p>
            This box scrolls!! I'm a filthy firefox user though so the scrollbar isn't visible. Fusce quis feugiat ante, eget vehicula lacus. Sed sit amet ligula nisl. In vestibulum, nisl eu tristique semper, sem ipsum eleifend sem, eu fringilla justo mauris non enim. Mauris a maximus risus. Vivamus pretium nunc in diam convallis, sed tincidunt leo vulputate. Suspendisse at dolor quis eros lobortis posuere vitae non elit. Etiam fermentum pretium ligula eu elementum. Maecenas luctus nunc ut ex gravida, ut lobortis nisl fringilla. Sed at nibh mi. Duis non convallis enim, et aliquam mi. Fusce sit amet lorem orci. Suspendisse auctor non lacus eu gravida.
        </p>



    </div>


    </div>
</div>

<div class="py-3 col-lg-3 col-sm-12">
    <div class="container" style="background-image: url('https://via.placeholder.com/300x400');
  background-size: cover; background-position: center;height:358px;"></div><!--- this image is really finicky, it also centers -->

</div>

</div> <!-- containers row end -->

    <div class="mb-4 pb-1"><p class="pull-right">
        <a href="https://toyhou.se/Strixxus" style="font-size:18px">
            <i class="fas fa-code  text-info"></i></a></p></div>

</div><!------------------------------------------ Code End ---------->