Align one button to the right with Bootstrap 4

Navigation
0

I'm doing a CRUD and I need to align a button to the right completely but I can not do it, usually I always do it with ml-auto but it does not work for me, here's the code: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="card">
					<div class="card-body">
						Lista de Etiquetas
						<a href="#" class="btn btn-primary btn-sm ml-auto">Crear</a>
					</div>
				</div>
			</div>
		</div>
	</div>
    
asked by Victor Escalona 22.04.2018 в 07:08
source

2 answers

1

In principle the class ml-auto aligns to the right, but this class is typical of flexbox in bootstrap4 and to use the parent you must have the class d-flex 

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

Another option without flexbox is to use the class float-right 

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

An option using Bootstrap's flexbox is with the d-flex justify-content-between align-items-center classes used in the container, which in this case allow the text to be on the left and the button on the right, in addition to keeping it centered vertically. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="card">
					<div class="card-body d-flex justify-content-between align-items-center">
						Lista de Etiquetas
						<a href="#" class="btn btn-primary btn-sm">Crear</a>
					</div>
				</div>
			</div>
		</div>
	</div>
    
answered by 22.04.2018 в 07:21
Insert in a Mysql table which in turn depends on two other tables I can not detect xpath on Twitter