Bootstrap 3 - How to display buttons (btn-navbar) in a folded navbar?

Question

I made a footer containing 3 buttons (btn-navbar) using the following HTML. When the navigation bar is reset, I can use it correctly, but the buttons are displayed on the same line instead of one on top of the other, as is the case with the elements <li>.

  <!-- 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 looks like this:

And I would like it to be so ...

Thanks in advance.

Answer 1

Working script

You are missing li inside ul. HTMLmarkup problem:

 <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, for example:

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

ul li, , .

Answer 3

Your HTML is incorrect. An element buttoncannot be directly embedded in an element ul.

You must wrap the button element in the element LI.

Try this HTML:

<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">
          <li class = "active"><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-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>
       </ul>
    </div>

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

Working script