Bootstrap 3 - How to properly display buttons (btn-navbar) in collapsed navbar?

Question

I made a footer that contains 3 buttons (btn-navbar) using the following HTML code. When the navbar is collapsed I can toogle it properly, but the buttons are displayed all in the same line instead of one on top of each other like it does with <li> elements.

  <!-- Fixed navbar bottom -->
  <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">

      <div class="navbar-collapse collapse" id="navbar-footer">

        <ul class="nav navbar-nav navbar-right">

          <button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button>
          <button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
          <button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>

        </ul>

      </div><!--/.nav-collapse -->

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

    </div>
  </div>

It shows like this...

And I'd like it to show like this...

Thanks in advance.

Answer 1

Working Fiddle

You are missing li within ul. HTML markup issue:

 <ul class="nav navbar-nav navbar-right">
   <li><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
   <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
   <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button></li>
 </ul>

Answer 2

Wrap each of your buttons in an li tag, like this:

<li><button type="button" class="btn btn-warning navbar-btn">
<span class="glyphicon glyphicon-check"></span> Verificar</button></li>

Each line inside of a ul tag needs to be wrapped in li tags to behave as expected.