JSFiddle - React, Tailwind, and code Playground

by Rynne Cowham

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
	  <span class="text-center center-block" style="max-width:100%">
	    <span data-caption="Some sample text. Some sample text." class="img-wrapper text-left">
          <img class="img-responsive" src="http://placehold.it/350x150">
  		</span>
  	  </span>
    </div>
  </div>
</div>

CSS

.img-wrapper {
 display:inline-block;
    max-width:100%;
}
.img-wrapper:after {
 content: attr(data-caption);
 text-align:left;
 display:-inline-block;
}