How do I center "btn-group btn-group-justified" on mobile viewport with Bootstrap 3.0

Question

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

I have created a bootply at http://bootply.com/102065

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.

I also used the <a> element for this section has advised in the bootstrap documentation.

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.

I would like the buttons in the btn-group to either stack on top of each other, or to scale properly.

I assume I will need to add a media query to my css to specifically target mobile devices for this section Ex. @media (max-width: @screen-xs-max) { ... }

Can the "btn-group btn-justified" component be forced to scale differently on .col-xs?

Answer 1

The "btn-group btn-group-justified" does not break down for mobile. What you're looking for is the justified navigation set up demonstrated here:

http://getbootstrap.com/examples/justified-nav/

    <ul class="nav nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

It might be easier to roll your own since over-riding the nav nav-justified might be too much. Here's something: http://jsbin.com/ehaRIQA/1/edit & http://jsbin.com/ehaRIQA/1/