As a newcomer to coding, I am facing an issue with my current project. The majority of the work needs to be done in Bootstrap, with some additional CSS. My goal is to have informational bullets on the left side of an image that is centered, and more informational bullets on the right side. Essentially, it should look like: bullets, image, bullets.
I have managed to get the left side looking as intended and the image perfectly centered, however, the right side alignment is giving me trouble. No matter what I try - using p tags enclosed in a div, eliminating the p tag and only using a div, experimenting with display: inline-block, position: center, adjusting margins, using Bootstrap's text-center class - nothing seems to work. I have scoured YouTube for solutions, but I'm unable to achieve the desired layout. Once again, it should feature an image at the center with bulleted text running down each side.
.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-->