Home / Questions / 283823
Accepted
Lorenzo Martín
Asked: 2020-08-06 07:03:43 +0800 CST 2020-08-06 07:03:43 +0800 CST

Align inside nav Bootstrap 4

  • 772

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" rel="stylesheet"/>
    <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>

bootstrap-4

2 Answers

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

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

    The class .float-rightdoes not work for you because it conflicts with elements in Flex del navbar, Bootstrap itself recommends you to be careful with it .

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

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

    • 8
  2. Best Answer

    Is this nav going to have something other than the button, such as a list of items? Because if you are only going to put the button I think it is better to do it in a div and not in a nav.

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

<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">
            <!--div en lugar de nav-->
            <div class="fixed-bottom bg-dark text-right py-2">
              <button type="button" id="addParte" class="btn btn-outline-success"><i class="fa fa-plus-circle" aria-hidden="true"></i> Parte</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    • 6