How can I center two images side-by-side with Bootstrap 3?
<p>I can't seem to get the two images of class 'social' side-by-side, central to the column of class 'col-sm-4'. Instead they stack as the screen size decreases. Any ideas how I can do this responsively?</p>

<p>HTML</p>

<pre><code>&lt;div class="container-fluid"&gt;
     &lt;div class="row" style="border-top: 0"&gt;
          &lt;!-- Profile info --&gt;
          &lt;div class="col-sm-4 col-sm-offset-4"&gt;
               &lt;img class="img-circle img-responsive" src="images/callum.jpg"&gt;
               &lt;h1 class="text-center" style="color: #3FA2B2"&gt;Callum Messiter&lt;/h1&gt;
               &lt;p class="text-center"&gt;100-trillion cells and 100-billion neurons defying the 1 in 10&lt;sup&gt;2,685,000&lt;/sup&gt; chance of me existing.&lt;/p&gt; 
               &lt;img class="social" src="images/twitter.png"&gt;
               &lt;img class="social" src="images/github.png"&gt;
          &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.row{
   border-top: 1px solid #808080;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}

.col-sm-4{
   height: 450px;
}

.img-circle{
   height: 200px;
   width: 200px;
   margin: 0 auto;
   position: relative;
   top: 40px;
   border: 2px solid white;
}

.text-center{
   font-family: helvetica;
   color: white;
   position: relative;
   top: 50px;
}

span{
   font-weight: bold;   
   background-color: #e6e6e6;
   color: #3FA2B2;
   padding: 3px 7px 3px 7px;
}

.social{
   height: 50px;
   width: 50px;
   margin: 0 auto;
}
</code></pre>