Alinear un boton a la derecha con Bootstrap 4

publicado por: Anonymous

Estoy haciendo un CRUD y necesito alinear un botón a la derecha completamente pero no logro hacerlo, por lo general siempre lo suelo hacer con ml-auto pero no me funciona, acá el código:

_x000D_

_x000D_

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
	<div class="container">_x000D_
		<div class="row">_x000D_
			<div class="col-md-8 col-md-offset-2">_x000D_
				<div class="card">_x000D_
					<div class="card-body">_x000D_
						Lista de Etiquetas_x000D_
						<a href="#" class="btn btn-primary btn-sm ml-auto">Crear</a>_x000D_
					</div>_x000D_
				</div>_x000D_
			</div>_x000D_
		</div>_x000D_
	</div>

_x000D_

_x000D_

_x000D_

solución

En principio la clase ml-auto alinea a la derecha , pero esta clase es propia de flexbox en bootstrap4 y para utilizar el padre debe tener la clase d-flex

_x000D_

_x000D_

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
    <div class="row">_x000D_
        <div class="col-md-8 col-md-offset-2">_x000D_
            <div class="card">_x000D_
                <div class="card-body d-flex">_x000D_
                    Lista de Etiquetas_x000D_
                    <a href="#" class="btn btn-primary btn-sm ml-auto">Crear</a>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Otra opción sin flexbox es utilizar la clase float-right

_x000D_

_x000D_

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
    <div class="row">_x000D_
        <div class="col-md-8 col-md-offset-2">_x000D_
            <div class="card">_x000D_
                <div class="card-body">_x000D_
                    Lista de Etiquetas_x000D_
                    <a href="#" class="btn btn-primary btn-sm float-right">Crear</a>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *