JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    
<div class="container">
      <div class="row">

         <div class="col-sm-5 vert-align">
            <div class="slideshow">
               <div>
                  <img class="img-circle img-responsive" src="http://grafox.com.br/img/home/leoQuadrado.jpg" alt="...">
               </div>
            </div>
             </div><!--

         --><div class="col-sm-6 col-md-offset-1 vert-align vert-text" style="height: 400px;border : 1px solid red;"> <!-- placeholder solution: add  padding-top: 100px;-->

               <h2 class="featurette-heading">
                  This First Heading
                  <span class="text-muted">Will Catch Your Eye</span>
               </h2>
               <p class="lead">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. </p>

         </div>
      </div>
   </div>
          
</div>

CSS

.vert-align {
    display: flex;
    align-items: center;
    vertical-align: middle;
}