Forums

Cannot center btn-group on mobile device

Permalink
I am using the Bootstrap 3.0 theme.

I added a stack in the top footer section to highlight a group of common site links.

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. 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 stack on top of each other, or to scale properly.

I have been researching this extensively and have not found a solution yet.

Any advise would be greatly appreciated.

Thanks in advance,


The html code in the content block is: 

<div class="btn-group btn-group-justified"><a class="btn btn-ftr" href="#">Our Links</a> <a class="btn btn-ftr" href="#">Rentals</a> <a class="btn btn-ftr" href="#">Home Help</a> <a class="btn btn-ftr" href="#">Contact Us</a></div>


The custom css code is:
/* Footer */
.bs-footer {
  padding-top: 0px;
  padding-bottom: 10px;
  margin-top: 50px;
  background-color: #000893;
  color: #f5f5f5;
  display: block;
}
.bs-social {
  margin-top: 0px;
  margin-bottom: 0px;
}
/* Footer top links
-------------------------------------------------- */
Viewing 15 lines of 28 lines. View entire code block.

1 Attachment

SteadyIT
 
mhawke replied on at Permalink Reply
mhawke
Is there a live URL we could have a look at?
SteadyIT replied on at Permalink Reply
SteadyIT
Hello @mhawke,

I ending using a different approach to my footer top links:

html
<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>


css
.justified-nav {
    margin: 0;
    padding: 0;
}
.justified-nav > li {
    display: block;
    line-height: 1;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    background-color: #eee;
    list-style: none;
    margin: 0 0 5px 0;
    border-radius: 5px;
}
Viewing 15 lines of 44 lines. View entire code block.


It was recommended that I take this approach since the "btn-group btn-group-justified" does not break down for a mobile viewport.
Skytech replied on at Permalink Reply
Why do you have:

.justified-nav {}


In your CSS,

and (note the changed order)

.nav-justified {}


in the HTML?
SteadyIT replied on at Permalink Reply
SteadyIT
@Skytech

That is just a typo in my HTML. The ul class should read <ul class="nav nav-justified>

Thanks for pointing that out.