How can I wrap text around image using Bootstrap? - html

Question

I want to wrap text around image as shown below:
How can I do it?...
I would be very grateful for the information. Thanks to all.

Answer 1

You can make use of the position: absolute inside a relatively positioned container and use the top and left properties to 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>

Answer 2

<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-3">
Text here
</div>
<div class="col-sm-6">
<img src="img.jpg" class="img-responsive"/>
</div>
<div class="col-sm-3">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div>
<div class="col-sm-6">
Text here
</div> `enter code here`
</div>
</div>
</div>