Speech Bubble Snippet

<!-- ---------------------  CODE BY OneAlbatross  ------------------------
---- ---------------------------------------------------------------------

|[All links, socials, etc]:  https://onealbatross.carrd.co/
|[Tip jar]:  https://ko-fi.com/onealbatross


|[ Rules ]
        - My normal T.O.S. don't really apply here since it's a rather small snippet, all I ask is for you to kindly direct others here if asked where you got the code

 |[ Info ]
    Color info
    - first version uses bg-light and text-dark
    - second version uses bg-dark and text-light
    - custom version uses background:rgba(255,255,255,1) for the background and color:rgba(0,0,0,1) for the text
    - NOTE there are two instances of each background color - be sure to change both and not just one or the little triangle at the top will be a different color from the box

    For use in normal profiles
    - you may want to add <div class="mx-auto" style="max-width:300px"> to the beginning and </div> to the end of the code to get it to stay small and center within the page like in the preview (otherwise it tends to span the entire width or align left)

    If the speech bubble is too close or too far from what is above it
    - increase or decrease the negative number in margin-top:-5px (more negative numbers like -20 will place it further up while more positive numbers will move it farther down)


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









<!-- ------------------------------------------------------------------------ -->
<!-- Light Version Bootstrap (bg-light and text-dark) -->
<!-- ------------------------------------------------------------------------ -->
<div style="position:relative; z-index:01; margin-left:15px; margin-top:-5px; margin-bottom:-9px;">

    <div class="card bg-light rounded-0 p-2" style="width:15px; border-width:2px 2px 0 0; transform:rotate(315deg);"></div>

</div>

<div class="card bg-light p-2 mb-2 text-dark">

    Your text here - Lorem ipsum dolor sit amet, adipiscing elit.

</div>
<!-- ------------------------------------------------------------------------ -->





<!-- ------------------------------------------------------------------------ -->
<!-- Dark Version Bootstrap (bg-dark and text-light) -->
<!-- ------------------------------------------------------------------------ -->
<div style="position:relative; z-index:01; margin-left:15px; margin-top:-5px; margin-bottom:-9px;">

    <div class="card bg-dark rounded-0 p-2" style="width:15px; border-width:2px 2px 0 0; transform:rotate(315deg);"></div>

</div>

<div class="card bg-dark p-2 mb-2 text-light">

    Your text here - Lorem ipsum dolor sit amet, adipiscing elit.

</div>
<!-- ------------------------------------------------------------------------ -->






<!-- ------------------------------------------------------------------------ -->
<!-- Custom Colors set to white background and black text by default ( background:rgba(255,255,255,1) and color:rgba(0,0,0,1) ) -->
<!-- ------------------------------------------------------------------------ -->
<div style="position:relative; z-index:01; margin-left:15px; margin-top:-5px; margin-bottom:-9px;">

    <div class="card rounded-0 p-2" style="width:15px; border-width:2px 2px 0 0; transform:rotate(315deg); background:rgba(255,255,255,1)"></div>

</div>

<div class="card p-2 mb-2" style="background:rgba(255,255,255,1); color:rgba(0,0,0,1)">

    Your text here - Lorem ipsum dolor sit amet, adipiscing elit.

</div>
<!-- ------------------------------------------------------------------------ -->