bootstrap-4 – Align inside nav Bootstrap 4

Question:

I'm trying to align a button to the right inside my nav and I can't.

  

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <div class="container-fluid">
    	<div class="card">
    		<div class="card-header">
    			Cabecera
    		</div>
    		<div class="card-body">
    			<div id="principal">
    				<div class="row">
    					<div class="col">
    						
    						<nav class="navbar fixed-bottom  navbar-dark bg-dark">
    							<button type="button" id="addParte" class="btn btn-outline-success float-right "><i class="fa fa-plus-circle" aria-hidden="true"></i> Parte</button>
    						</nav>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

Answer:

To align elements to the right within a navbar , Bootstrap has a .ml-auto class that applies to <ul> lists, this is possible using Flexbox .

What this class does is "nudge" elements to the right by assigning an auto-margin to the left.

The .float-right class does not work for you because it conflicts with the Flex elements of the navbar , Bootstrap itself recommends that you be careful with it .

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />

<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      Cabecera
    </div>
    <div class="card-body">
      <div id="principal">
        <div class="row">
          <div class="col">

            <nav class="navbar fixed-bottom  navbar-dark bg-dark">
              <ul class="nav navbar-nav ml-auto">
                <li>
                  <button type="button" id="addParte" class="btn btn-outline-success float-right"><i class="fa fa-plus-circle" aria-hidden="true"></i> Parte</button></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Scroll to Top