title: Center div inside a div that is in a bootstrap grid
body: <p>I have the following structure:</p>
  
  <pre><code>&lt;div class="footer col-md-12"&gt;
  
      &lt;div class="social col-md-3 col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-4"&gt;
          &lt;a href="http://facebook.com" target="_blank"&gt;&lt;div id="fb"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;a href="http://linkedin.com" target="_blank"&gt;&lt;div id="linkedin"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;a href="http://plus.google.com" target="_blank"&gt;&lt;div id="gplus"&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is also a div with copyright text, that I can't post. it is before the "social" div. On mobile devices, I am removing the copyright text(via display: none;), and I want to center the social icons, but I am unable to do so. I manage to do it, with margins and percentages, but on a specific resolution only, all other mobile resolutions are broken. Can someone assist me?
  Note: I tried changing the xs column width and offset, but no combination managed to center the icons. I am posting the one, that was closest, that I centered with adding some margins. </p>