Bootstrap Wide Character Relations Code

<!--------------------------------------
    Free to Use Character Relationship Code by LeafJelly
            Verison: Bootstrap Wide
         ideal for wide character codes


    Copy and paste the entire code for multiple chara relationships!

This code is meant to be added onto other existing character codes, not used on it's own. But you can if u want to.
Adding this code onto other codes is considered frankensteining codes, please check with other coder's rules to see if they're okay with it!
My codes can be frankensteined/mix n match with other codes as long as all the coders are credited.

-------------------------------------->

<div class="col-12 col-lg-9 my-1" style="margin:auto">
<hr>
<div class="row no-gutter">

<!-------------Character Info------------------->
    <div class="col-12 col-md-5 col-lg-4 px-1 align-items-center">
        <div class="card border-0 py-3 bg-faded" style="font-variant:small-caps;">
        <div class="row no-gutters">
        <!----------Character Image use a square image
            You can change the container shape to a square by replacing class="rounded-circle" with class="square"
        -------------------->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089537_0DOOErtBbKNrYX0.png" class="rounded-circle" style="height:150px;width:150px;margin:auto">

            <div class="col-12 text-center text-uppercase text-primary" style="font-size:1.4em;font-weight:500;">
                <p><i class="px-1 fa-solid fa-hand-holding-magic fa-sm"></i>Relationship type</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Name <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content </p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Pronouns <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content/Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Age <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Species <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>Content</p></div>

            <div class="col-5 text-right px-1" style="font-weight:500;">
                <p>Met via <i class="fa-solid fa-dash"></i></p></div>
            <div class="col-6 ">
                <p>In the Woods</p></div>

        <!-------Copy and paste above here if you want more rows. You can also remove a bunch of rows---------->
        </div></div>
    </div>

<!----------Relationship Info-------------->
    <div class="col-12 col-md-7 col-lg-8 p-0 px-1">
        <div class="card border-0 p-3 h-100 bg-faded">
        <!---------Quote Delete if you don't want it--------->
            <p class="text-center text-muted" style="margin:auto;font-size:1.1em;"><i class="pr-2 fa-solid fa-quote-left fa-sm"></i>
            Stand Alone Code Preview! Copy and paste whole code to the bottom of existing chara code for a buncha vertical relationsips<i class="pl-2 fa-solid fa-quote-right fa-sm"></i></p>

        <!---------Relationship info
        If the box looks too long to you, change the height here
        --------->
        <div class="mt-2" style="overflow:auto;height:230px;">
            <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce est elit, condimentum at turpis sit amet, feugiat fermentum leo. In malesuada rutrum dictum. Nulla gravida tempor laoreet. Donec tincidunt dolor eget orci faucibus, a hendrerit arcu faucibus. Nam venenatis vestibulum fermentum. Nulla id ipsum at risus gravida sollicitudin. Morbi ultrices hendrerit turpis, id venenatis nibh pretium vel. Mauris imperdiet at ex quis accumsan. Donec pharetra turpis vel pharetra condimentum. Vestibulum quis tempor nisl.
            </p>

            <p>
             Nullam eros dui, dictum ut arcu maximus, fringilla volutpat quam. Vestibulum aliquam, ante nec iaculis posuere, metus tortor vestibulum leo, sit amet sollicitudin dolor ligula sit amet felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eleifend porttitor aliquam. Nam tincidunt elit nisi, ac fringilla enim rhoncus vitae. Nunc in eros elit. Suspendisse quam nunc, fermentum eu diam id, consectetur finibus neque. Curabitur malesuada sed augue at elementum. Quisque mauris elit, posuere at scelerisque eget, tempor a eros. Donec ornare efficitur elit id viverra. Sed et dictum quam, nec vulputate nulla.
            </p>

            <p>
             Duis vel velit urna. Fusce risus ligula, vehicula aliquam auctor in, maximus id tortor. Pellentesque pretium blandit sollicitudin. Fusce bibendum sit amet turpis eu fermentum. Pellentesque at vehicula ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nunc mi, tempor a mauris porta, commodo ullamcorper lectus. Ut ac justo iaculis, fermentum eros quis, gravida nisi.
            </p>

            <a href="https://toyhou.se/LeafJelly" title="Code by LeafJelly"><i class="px-3 pull-right text-muted fa-solid fa-code fa-sm"></i></a>

        </div>
        </div>

    </div>

</div>
</div>