Footer Buttons like old Symbian with Twitter Bootstrap

Question

Footer Buttons like old Symbian with Twitter Bootstrap

Navigation

#1 by (1 votes)

0

I was given the task of 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: just like in 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 Sticky Footer example that has on the Bootstrap site itself, but I still have not had much success.

As recommended, 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 CSS related:

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

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

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

css twitter-bootstrap gui

asked by anonymous 08.09.2014 / 23:41

1 answer

Uncaught ReferenceError: CKEDITOR is not defined Online server and Unity 3d [closed]

score 1 · Accepted Answer

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 have the buttons side by side and occupying the size of the div.

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