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>