Bootstrapでボタンの位置（submit）を右端にしたいです。

Question

前提・実現したいこと

Bootstrapでボタンの位置（submit）を右端にしたいです。

ソースコード

@extends('layouts.app')

@section('content')

<div class="jumbotron mt-5"> <div class="container"> <h2>Sign In</h2> @if(count($errors) >0) <div class="alert alert-danger"> @foreach($errors->all() as $error) <p>{{ $error }}</p> @endforeach </div> @endif <form action="{{ route('user.signup') }}" method="post" class="mt-3"> <div class="form-group"> <label for="email">e-mail</label> <input type="text" id="email" name="email" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" class="form-control"> </div> <button type="submit" class="btn btn-primary">ログイン</button> {{ csrf_field() }} </form> </div> </div> @endsection

試したこと

class="btn btn-primary text-right" とやってもダメでした。

補足情報（FW/ツールのバージョンなど）

Bootstrap4.3
blade

Answer 1

.text-rightを使うなら、下記のようにbutton自身ではなくその親要素などに指定すればいけますよ。

<div class="text-right">
  <button type="submit" class="btn btn-primary">ログイン</button>
</div>

Bootstrapの.text-rightはその中にある要素が右寄せになります。
ほかに.d-flex.justify-content-endを使う方法などもあります。

Comments

[h.yamazaki]

解決しました！ありがとうございます。