Footer buttons like the old Symbian with Twitter Bootstrap

Question

I’ve been tasked with making a mobile web app, and I’m trying to do it with the help of Twitter Bootstrap. One of the tasks is to make a pair of buttons in the footer, both of equal size, each occupying half the width of the screen: as in the old Symbian.

Since I’m new to Bootstrap, I’m having a hard time trying to reach that goal. I tried to use some of the example of Sticky Footer on the Bootstrap site itself, but I haven’t had much success yet.

As recomedando, follow the code (using Jade and Stylus for convenience):

.footer
  .container
    .btn-group.btn-group-lg
      button.btn Sair
      button.btn Opções

And the referent CSS:

.footer
  position absolute
  bottom 0
  width 90%
  height 60px

Already adding, my intention is to arrive at a result like this:

+------------------+
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
+--------+---------+
| Sair   |    Menu |
+------------------+

Answer 1

Inside the footer div add this div:

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Sair</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Menu</button>
  </div>
</div>

With these two buttons applied you will already own the buttons side by side and occupying the size of the div.

---

In your case it could be used too <ul> and <li> and setting his style to width:160px (or 50%) thinking it would be for mobile where the default is 320px.