Trouble positioning bootstrap/ CSS element - html

Question

I'm new at coding and have a problem. I'm working on a project and it has to be done mostly in Bootstrap, although I added some css. I want it to look like:
informational bullets down left IMAGE in center, Informational bullets on right. So bullets, image, bullets.
I believe I have the left side ok and the image is perfectly centered where I want it to be, but the right side is NOT cooperating at all. No matter what I've tried, it keeps remaining at the bottom right of the image instead of starting at top of image on the right hand side.
I've tried using p tag then enclosed it in a div, then got rid of p tag and only used a div. I've tried styling it all kinds of ways.... display: inline-block, position:center, I tried messing with the margins, I tried using bootstraps' text-center in the opening tags, I've tirelessly searched YouTube. I don't know how to make this look the way I want it to look. Again, an image centered and bulleted text going down each side of image.
.bottom {
}
img {
border: 20px inset gray;
width: 500px;
display: block;
margin: 0 auto;
}
.bullet {
}
.bullet2 {
display:inline-block;
margin-left: 850px;
margin-bottom:-300px;
}
<div class="container bg-primary">
<div class="row">
<div class="col-md-12 col-xs-12">
<h1 class="text-center text-white">Water</h1>
<h2 class="text-center text-white"><em>Where there is no water, there is no life</em></h2>
</div><!--end col12-->
</div><!--end row-->
<div class="body">
<div class="bullet text-white">This is a cool and informative paragraph</div>
<img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water"/>
<div class="bullet2 text-white">This is a cool and informative paragraph</div>
</div><!--body-->
</div><!--end container-->

Answer 1

It looks like you're using Bootstrap.
If I understood correctly, this markup schema should do it:
container
row
col-sm-4
bullets
col-sm-4
img-responsive
col-sm-4
bullets
Depending on version of Bootstrap and where you want this to break (responsive-wise), you might have to change col-sm-4 to other Bootstrap grid classes.
Documentation: v3. v4.
And a working example, using v3.3.7:
/* you don't actually need this CSS, it's just for SO */
body { margin: 0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul>
<li>A bullet</li>
<li>Another bullet</li>
<li>...</li>
</ul>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water" />
</div>
<div class="col-sm-4">
<ul>
<li>A bullet</li>
<li>Another bullet</li>
<li>...</li>
</ul>
</div>
</div>
</div>