title: How do I center "btn-group btn-group-justified" on mobile viewport with Bootstrap 3.0
body: <p>I added a stack in the top section of my footer to highlight a group of common site links.
  I am building this site with a Concrete5 CMS theme built on Bootstrap 3.0</p>
  
  <p>I have created a bootply at <a href="http://bootply.com/102065" rel="nofollow">http://bootply.com/102065</a></p>
  
  <p>I used the "btn-group btn-justified" class from Bootstrap to make the group of buttons stretch at the same size and to span the entire width of its parent.</p>
  
  <p>I also used the <code>&lt;a&gt;</code> element for this section has advised in the bootstrap documentation. </p>
  
  <p>Everything looks great except when I view the footer site links on a mobile device. (Please see the screen shot below) The buttons do not scale to fit the viewport. The jump out of the container and overlay on the next button. I have included a screenshot.  </p>
  
  <p>I would like the buttons in the btn-group to either stack on top of each other, or to scale properly.</p>
  
  <p>I assume I will need to add a media query to my css to specifically target mobile devices for this section
  Ex. <code>@media (max-width: @screen-xs-max) { ... }</code></p>
  
  <p><strong>Can the "btn-group btn-justified" component be forced to scale differently on .col-xs?</strong></p>