"Deutsch als Fremdsprache"
Bootstrap 4.1.1 Snippet by Marnoweb

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="wrapper"> <div class="container p-2"> <div class="row"> <div class="col-sm-3 green"><img src="https://placehold.it/300x300" alt="" class="img-fluid"></div> <div class="col-sm-9 blue"> <article class="text-justify"> <p> <b data-toggle="tooltip" data-placement="top" title="Tooltip on top">Lorem ipsum dolor sit amet</b>, consectetur adipisicing elit. Molestias cum, exercitationem expedita consequatur cupiditate architecto enim laborum illo, repellendus aut quos commodi eos unde ipsam deserunt dicta doloremque fuga distinctio animi corrupti tempore sed ipsa natus. Nemo, amet? Fugiat sapiente sint, at assumenda facilis officia. Nostrum dolor debitis temporibus explicabo et quidem ex totam quod possimus porro corrupti, modi quasi ratione officiis doloribus quaerat, placeat numquam, fugit dolorum, deserunt. Soluta inventore velit itaque cum totam? Rerum excepturi deserunt cupiditate debitis adipisci consequuntur suscipit aperiam laborum itaque cum qui quae, temporibus sequi repellat harum minus sed, sit, alias, labore? Minus, nulla! </p> </article> </div> </div> </div> </section>
#wrapper{ background:#eed; } .img-fluid{ box-shadow:0 0 0 black; transition: box-shadow 1s; } .img-fluid:hover{ box-shadow:10px 10px 10px grey; }
$(function () { $('[data-toggle="tooltip"]').tooltip() })

Related: See More


Questions / Comments: