Bootstrap Align Image with text
You have two choices, either correct your markup so that it uses correct elements and utilizes the Bootstrap grid system:
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<div class="container">
<h1>About Me</h1>
<div class="row">
<div class="col-md-4">
<div class="imgAbt">
<img width="220" height="220" src="img/me.jpg" />
</div>
</div>
<div class="col-md-8">
<p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
</div>
</div>
</div>Or, if you wish the text to closely wrap the image, change your markup to:
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<div class="container">
<h1>About Me</h1>
<div class="row">
<div class="col-md-12">
<img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/me.jpg" />
<p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
</div>
</div>use the grid-system of boostrap , more information here
for example
<div class="row">
<div class="col-md-4">here img</div>
<div class="col-md-4">here text</div>
</div>
in this way when the page will shrink the second div(the text) will be found under the first(the image)