Porfolio project: Issue with boostrap grid alignment

Porfolio project: Issue with boostrap grid alignment
0.0 0

#1

Hi, I am trying to create a row with two columns seating side by side. The left column would display text and the right a picture. However, what is displaying is the text on top and the image on the bottom.

           <div class="well-lg gray" id="about-well">
           <div class="row" >
               <div class-"col-md-8">
                   <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
               
               </div>
               <div class ="col-md-4">
                    <img  class = "img-circle img-responsive" width="100" height="100" src="#"></img>
               </div>
            </div>
   </div>

#2

Haiiiyo.

Without seeing the rest of the code, I’m guessing that it’s because you have a typo in your larger column <div class-"col-md-8">, where you have mistyped an equal sign.

If it still doesn’t work after fixing this, it would be helpful if you can provide the full code of your project or a link to it!

I hope that that helps! :slight_smile:


#3

You’ll want to put your row inside a container div, either .container or .container-fluid. Try this:

<div class="well-lg gray" id="about-well">
	<div class="container">
		<div class="row" >
			<div class="col-md-8">
				<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
			</div>
			<div class ="col-md-4">
				<img class = "img-circle img-responsive" width="100" height="100" src="#">
			</div>
		</div>
	</div>
</div>

I also noticed your img element has a closing tag. This element is self closing, so just <img class = "img-circle img-responsive" width="100" height="100" src="#"> without the </img> is all that is necessary.


#4

Thank you Honmanyau this solved the problem. I really appreciated your help.


#5

Hi Janusoo, thank I removed the closing img tag.


#6

Glad to be of help. And great catch by @honmanyau on the typo! Guess I was wrong about requiring the container div, though. I’ll have to experiment more with that myself. I’ve been trying to use bootstrap more in recent projects, too.