# Float image to the left - how to do it?

**URL:** <https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210>\
**Category:** General\
**Created:** [June 30, 2017, 4:17pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210 "2017-06-30T16:17:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ronermatt](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ronermatt](https://forum.freecodecamp.org/u/ronermatt)\
**Post date:** [June 30, 2017, 4:17pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210/1 "2017-06-30T16:17:49Z")

</div>

```auto
<main class="container">
  <header class="pad-top pad-bottom">
    <h1 class="text-center">A tribute to Ernest Hemingway</h1>
	</header>
 <div class="row">
		<div class="col-xs-12 col-md-4 text-center clear-fix img-rounded"> <img class="img-responsive img-thumbnail pull-left" src="https://i2.wp.com/www.brainpickings.org/wp-content/forum/uploads/2013/11/ernesthemingwayonwriting1.jpg?w=680&ssl=1" alt="Hemingway writing">
		</div>
  <div class="col-xs-12 col-md-8 pad-right pad-left">
			<h2 class="pad-top">About Hemingway</h2>
			<p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
   </div>
    </div>
   
   <div class="row">
		<div class="col-xs-12 col-md-4">
			<img class="pull-right-xs img-responsive img-thumbnail img-rounded" src="http://www.metmuseum.org/connections/images/c2/c2_hemingway_006.jpg" alt="Hemingway bath tup"/>
     </div>     
     <div class="col-xs-12 col-md-8">
			<h2 class="pad-top">Life in a day of Hemingway</h2>
			<p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
   </div>
      </div>
  

  <div class="row">
		<div class="col-xs-12 pad-left pad-right">
			<h2 class="pad-top">Important life events</h2>
			<dl class="dl-horizontal timeline">
				<dt>July 21, 1899</dt>
        <dd>Hemingway was born Ernest Miller Hemingway.</dd>  
        </dl>
        </div>
    </div>

      
</main>
  

```

---

<div class="post-metadata">

**Author:** ![mirkoacimovic](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mirkoacimovic/32/45427_2.png) [@mirkoacimovic](https://forum.freecodecamp.org/u/mirkoacimovic)\
**Post date:** [June 30, 2017, 5:10pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210/2 "2017-06-30T17:10:09Z")

</div>

Try text-left bootstrap class

---

<div class="post-metadata">

**Author:** ![mirkoacimovic](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mirkoacimovic/32/45427_2.png) [@mirkoacimovic](https://forum.freecodecamp.org/u/mirkoacimovic)\
**Post date:** [June 30, 2017, 5:17pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210/3 "2017-06-30T17:17:23Z")

</div>

```
<main class="container">
  <header class="pad-top pad-bottom">
    <h1 class="text-center">A tribute to Ernest Hemingway</h1>
	</header>
 <div class="row">
		<div class="col-xs-12 col-md-4 text-center clear-fix img-rounded"> <img class="img-responsive img-thumbnail" src="https://i2.wp.com/www.brainpickings.org/wp-content/forum/uploads/2013/11/ernesthemingwayonwriting1.jpg?w=680&ssl=1" alt="Hemingway writing">
		</div>
  <div class="col-xs-12 col-md-8 pad-right pad-left">
			<h2 class="pad-top">About Hemingway</h2>
			<p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
   </div>
    </div>
   
   <div class="row">
		<div class="col-xs-12 col-md-4">
			<img class="img-responsive img-thumbnail img-rounded text-left" src="http://www.metmuseum.org/connections/images/c2/c2_hemingway_006.jpg" alt="Hemingway bath tup"/>
     </div>     
     <div class="col-xs-12 col-md-8">
			<h2 class="pad-top">Life in a day of Hemingway</h2>
			<p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, adipiscing lorem, nulla tortor nascetur et pharetra urna sit, etiam enim maecenas eget nulla mauris. Elit porta. Rhoncus molestie, iaculis donec justo nec eu proin integer, ac libero vivamus. Sodales per et, duis in venenatis, tortor vel.
			</p>
   </div>
      </div>
  

  <div class="row">
		<div class="col-md-12 pad-left pad-right text-right">
			<h2 class="pad-top">Important life events</h2>
			<dl class="dl-horizontal timeline">
				<dt>July 21, 1899</dt>
        <dd>Hemingway was born Ernest Miller Hemingway.</dd>  
        </dl>
        </div>
    </div>

      
</main>

```

and in CSS ;

img { float:left}

---

<div class="post-metadata">

**Author:** ![mkmanges](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mkmanges/32/161778_2.png) [@mkmanges](https://forum.freecodecamp.org/u/mkmanges)\
**Post date:** [June 30, 2017, 5:27pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210/4 "2017-06-30T17:27:09Z")

</div>

You can use the Bootstrap class `pull-left`

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:49pm UTC](https://forum.freecodecamp.org/t/float-image-to-the-left-how-to-do-it/133210/5 "2021-01-17T20:49:12Z")

</div>

Closed on January 17, 2021, 8:49pm UTC