Twitter Bootstrap Question posted in

Twitter Bootstrap fixed footer on mobile devices

I have this page that has a fixed footer and header http://magician-bombs-84382.bitballoon.com/

On the footer, I have 4 buttons but the buttons align vertically when the width resizes to less than that of large screens. I am making a page to fit mobile device within this range of media queries

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

The app I’m making will be locked to portrait view, so I’m not thinking of ever accessing the page on large screens.

After looking at the bootstrap.css file, I cannot seem to pinpoint the code responsible for arranging the buttons vertically instead of horizontally following the col-md-3 order available inside the class row.

How can I arrange the buttons horizontally? Removing the position: absolute for footer does not seem to solve it.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
Tags:

2

Answers


  1. 0

    Use .col-xs-3, it won’t break on extra small screens.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
    </div>
  </div>
</footer>
    Login or Signup to reply.
  2. 0

    It works fine and buttons don’t hide also.

    Fiddle demo

    .footer {
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search