Thought Bubble

created by:HTMLobster
HTMLBootstrapMiscellaneous

Line Count: 65
Difficulty:
Copy
<div class="container" style="max-width:600px;">
    <div class="row no-gutters">
        <!-- side image -->
        <div class="col-sm-4 order-sm-1 order-2 mt-sm-0 mt-n4 text-center">
            <!-- prevents people being able to copy image -->
            <div class="h-100 w-100" style="position:absolute; z-index:9;"></div>
            <!-- image - works best with transparent and portrait dimension images -->
            <img src="image_url" style="max-width:200px;">
        </div>
        
        <!-- thought bubble -->
        <div class="col order-sm-2 order-1">
            <!-- main content -->
            <div class="bg-faded p-2" style="z-index:3; position:relative; overflow:hidden;  border-radius:50px;">
                <div class="py-3 pl-3 pr-4 mr-n3 text-justify" style="border-radius:50px; overflow:auto; max-height:155px; scrollbar-width:thin;">
                    <!-- text - can be as long as you want -->
                    <p>
                        This section scrolls yippee!! Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl sem, sagittis tempus eros sed, euismod pretium lectus. Suspendisse tempus ipsum eu suscipit commodo. Nulla finibus bibendum ante, sit amet blandit nisi ultricies vitae. Vestibulum eu congue ex. 
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl sem, sagittis tempus eros sed, euismod pretium lectus. Suspendisse tempus ipsum eu suscipit commodo. Nulla finibus bibendum ante, sit amet blandit nisi ultricies vitae. Vestibulum eu congue ex. 
                    </p>
                </div>
            </div>
            <!-- main content end -->
            
            <!-- credit -->
            <div class="text-center">
              <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by HTMLobster">
                <i class="fa-regular fa-code text-muted fa-sm"></i>
              </a>
            </div>
            
            <!-- bubbles - do not edit -->
            <div class="hidden-sm-down">
                <div class="mt-n4 ml-3">
                    <div class="d-inline-block mt-n3">
                        <div class="bg-faded p-3 rounded-circle"></div>
                    </div>
                </div>
                
                <div class="mt-n3 ml-n1">
                    <div class="d-inline-block">
                        <div class="bg-faded p-2 rounded-circle"></div>
                    </div>
                </div>
            </div>
            
            <div class="hidden-md-up">
              <div class="mt-n4 ml-4">
                    <div class="d-inline-block mt-n2">
                        <div class="bg-faded p-3 rounded-circle"></div>
                    </div>
                </div>
                
                <div class="mt-n1 ml-5">
                    <div class="d-inline-block">
                        <div class="bg-faded p-2 rounded-circle"></div>
                    </div>
                </div>
            </div>
            <!-- bubbles end -->
        </div>
    </div>
</div>
Copy
<div class="container" style="max-width:600px;">
    <div class="row no-gutters">
        <!-- side image -->
        <div class="col-sm-4 order-sm-1 order-2 mt-sm-0 mt-n4 text-center">
            <!-- prevents people being able to copy image -->
            <div class="h-100 w-100" style="position:absolute; z-index:9;"></div>
            <!-- image - works best with transparent and portrait dimension images -->
            <img src="{{u!image!}}" style="max-width:200px;">
        </div>
        
        <!-- thought bubble -->
        <div class="col order-sm-2 order-1">
            <!-- main content -->
            <div class="bg-faded p-2" style="z-index:3; position:relative; overflow:hidden;  border-radius:50px;">
                <div class="py-3 pl-3 pr-4 mr-n3 text-justify" style="border-radius:50px; overflow:auto; max-height:155px; scrollbar-width:thin;">
                    <!-- text - can be as long as you want -->
                    {{%Description%
                    <p>
                        {{l%Paragraph%}}
                    </p>
                    %end%}}
                </div>
            </div>
            <!-- main content end -->
            
            <!-- credit -->
            <div class="text-center">
              <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by HTMLobster">
                <i class="fa-regular fa-code text-muted fa-sm"></i>
              </a>
            </div>
            
            <!-- bubbles - do not edit -->
            <div class="hidden-sm-down">
                <div class="mt-n4 ml-3">
                    <div class="d-inline-block mt-n3">
                        <div class="bg-faded p-3 rounded-circle"></div>
                    </div>
                </div>
                
                <div class="mt-n3 ml-n1">
                    <div class="d-inline-block">
                        <div class="bg-faded p-2 rounded-circle"></div>
                    </div>
                </div>
            </div>
            
            <div class="hidden-md-up">
              <div class="mt-n4 ml-4">
                    <div class="d-inline-block mt-n2">
                        <div class="bg-faded p-3 rounded-circle"></div>
                    </div>
                </div>
                
                <div class="mt-n1 ml-5">
                    <div class="d-inline-block">
                        <div class="bg-faded p-2 rounded-circle"></div>
                    </div>
                </div>
            </div>
            <!-- bubbles end -->
        </div>
    </div>
</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.