html - How can I wrap text around image using Bootstrap? -
i want wrap text around image shown below:
how can it?...
i grateful information. all.
you can make use of position: absolute
inside relatively positioned container , use top
, left
properties align it.
.img-circle-wrap { position: relative; width: 500px; height: 500px; } .img-circle { position: absolute; left: 30%; top: 30%; } .img-circle-wrap span { position: absolute; } .text-1 { top: 20%; left: 20%; } .text-2 { top: 20%; left: 70%; } .text-3 { top: 50%; left: 10%; } .text-4 { top: 50%; left: 80%; } .text-5 { top: 80%; left: 20%; } .text-6 { top: 80%; left: 70%; } .text-7 { top: 20%; left: 45%; } .text-8 { top: 80%; left: 45%; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="img-circle-wrap"> <img src="http://placehold.it/200x200" alt="..." class="img-circle"> <span class="text-1">text 1</span> <span class="text-2">text 2</span> <span class="text-3">text 3</span> <span class="text-4">text 4</span> <span class="text-5">text 5</span> <span class="text-6">text 6</span> <span class="text-7">text 7</span> <span class="text-8">text 8</span> </div>
Comments
Post a Comment