Image in a line of text / Paragraph - html

Question

I'm trying to insert an image into a paragraph that would look like the ball in this image:
.
I'm using Bootstrap if that matters.
I've been playing around using
<div class="col-md-8 col-xs 8">
<h1><?php echo $config["First"]["Title"];?></h1>
<p><?php echo $config["First"]["Text"];?></p>
<?php echo '<img src="img/ball.png" class="img" style="
float: right;
position: relative;
">';?>
</div>
This what I've been come up yet, but it just goes below the text, doesn't go inline.
This is the CSS for p tag:
p {
color: rgba( 180, 180, 180, 1 );
position: relative;
float: left;
}

Answer 1

Your img should be inside your <p> element:
<p><img src="imgs/ball.png" class="img" />paragrag content goes here</p>
Then just make your image float:left;

Answer 2

As stated before, you need to move the floated image to earlier in the text. Here's a working codepen: http://codepen.io/vic3685/pen/GqLyWX
<section id="first" class="first-section">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs 4">
<img src="http://placekitten.com/200/300" class="img-responsive" style="
width: 100px; float: left;
">
</div>
<div class="col-md-8 col-xs 8">
<h1>Title field here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt risus sagittis, molestie sapien vitae, finibus libero. Nunc ac elit pharetra, semper urna in, mollis nulla. Donec eget vehicula libero. Suspendisse porttitor diam at tellus placerat pharetra. Donec suscipit, ligula vitae auctor vulputate, risus erat pretium leo, ut laoreet libero sem in sem. Quisque et massa fermentum, molestie lacus et, auctor risus. Duis pretium lacinia massa, a semper justo gravida quis. Integer non arcu lectus. Ut vulputate et ipsum et molestie. Donec id iaculis justo. Praesent leo lacus, posuere id ligula at, semper volutpat magna. Suspendisse id laoreet erat, tempus commodo neque. Pellentesque dignissim laoreet vestibulum. Vivamus laoreet tristique commodo. Curabitur vestibulum rutrum urna nec lacinia.</p>
<p><img src="http://placekitten.com/200/300" class="img" style="
display: inline-block;
position: relative;
float: right;
width: 150px;
">Praesent a scelerisque augue. Nulla gravida mauris a mauris malesuada, et facilisis justo maximus. Praesent convallis gravida molestie. Morbi dignissim felis a urna egestas tristique. Nulla facilisi. Cras ipsum lorem, interdum non mi et, convallis molestie diam. Vivamus pellentesque fringilla est sit amet tempor. Sed vulputate, eros non aliquet feugiat, lectus urna laoreet arcu, quis malesuada sapien eros ut est. Ut scelerisque faucibus commodo. In finibus accumsan augue quis blandit. Phasellus maximus urna arcu, vitae malesuada risus rutrum a. Nam non augue eget metus varius pretium vitae ut turpis. Integer non elit odio. Nullam nec fermentum ante, sit amet mattis turpis. Maecenas felis lectus, semper sed leo ut, ullamcorper placerat orci.
</p>
<p> Nam iaculis interdum urna, at varius turpis vulputate id. Nulla eu odio eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et suscipit nisl. Curabitur eu faucibus tortor. Proin eget lorem at lectus fringilla porta quis nec dolor. Curabitur metus arcu, ullamcorper ac gravida nec, tristique suscipit lorem. Donec auctor sodales risus eu fermentum.</p>
</div>
</div>
</div>
</section>
For more in-depth information on floats, see: https://css-tricks.com/all-about-floats/

Answer 3

Here is a working fiddle, the best way to accomplish this is by putting the image at a certain point in the text, say after one or two paragraphs:
https://jsfiddle.net/5p4xdLto/1/
CSS:
.wrapper {
position: relative;
}
.left {
width: 100px;
position: absolute;
}
p {
padding-left: 120px;
}
.right {
float: right;
width: 100px;
}