[ F2U ] Snippet Comment (CODE (Bootstrap))

jiko

Profile


 <!-- JIKO'S F2U CODE: COMMENT ---------------------------->
 <!--
 > my rules, read before use [ https://toyhou.se/~bulletins/127417.code-rules ]
 
 > you can paste this code above or below the content!
 > if you want the entire code hidden on mobile view, add [hidden-xs-down] next to the p-2 below
 -->
 <div class="p-2" style="position:fixed; right:0; bottom:0; z-index:9999">
 <div class="row no-gutters align-items-center">
    
    
    
    <!-- PAGEDOLL
    ---------------------------------------------->
    <!--
    > the whole code is REALLY dependant on the pagedoll dimensions so adjust the [width] or use [height] instead if needed
    -->
    <div class="col-auto order-3 mt-auto">
        <img style="width:130px;"
        
        
        src="IMG_URL_HERE"
        
        
        class="hidden-xs-down ml-3 mb-n2">
        <!-- if you want a lil space below the image, delete [mb-n2] above -->
    </div>
    
    
    
    <!-- SPEECH BUBBLE
    ---------------------------------------------->
    <div class="col order-1">
    <div class="card border-0 bg-faded p-3 text-center" style="width:200px; border-radius:20px;">
        
        
        <!-- NOTICE --------------------------->
        <!--
        > you can code in a scrollbox feature if you want but by default, this is NOT suited for paragraphs.  keep it VERY short n simple!
        > NEW: the speech tick is centered to the speech box so if things look a little funny, try adjusting the pagedoll dimensions as well
        -->
        <div class="text-muted">
            
            
            <p>text text text  </p>
            
            
        </div>
        
        
        <!-- BUTTONS -------------------------->
        <!--
        > view [fontawesome.com] for more icons!
        -->
        <div class="row no-gutters pt-2 m-n1">
            
            
            <!-- ONE -->
            <div class="col p-1">
                <a href="LINK_HERE" class="w-100 btn btn-primary btn-sm text-white">
                    <i class="fas fa-link my-auto"></i>
                </a>
            </div>
            
            
        <!-- add more buttons if u want above this line! -->
        </div>
    </div>
    </div>
    
    
    
    <!-- SPEECH TICK
    ---------------------------------------------->
    <div class="col-auto order-2">
        <div class="hidden-xs-down" style="margin-right:-20px">
            <div class="bg-faded" style="height:30px; width:20px; clip-path: polygon(0 0, 0% 100%, 100% 50%);"></div>
        </div>
    </div>
 </div>
 </div>
 <!-- PAGEDOLL COMMENT END ------------------------>