Laravel 11 breezeで生成される認証機能のテンプレートをbootstrapでカスタマイズする方法

1. LaravelプロジェクトとBreezeのインストール

まず、Laravel 11のプロジェクトを作成し、Breezeパッケージをインストールします。

Bash

laravel new your-project-name
cd your-project-name
composer require laravel/breeze --dev
php artisan breeze:install blade # または vue や react
npm install
npm run dev

2. Bootstrapのインストール

次に、Bootstrapをプロジェクトにインストールします。npmまたはCDNを使用できます。

npmを使用する場合:

Bash

npm install bootstrap

resources/js/app.jsファイルにBootstrapをインポートします。

JavaScript

import './bootstrap';
import 'bootstrap/dist/css/bootstrap.css'; // BootstrapのCSSをインポート

npm run devを実行してアセットをコンパイルします。

CDNを使用する場合:

resources/views/layouts/app.blade.phpファイルの<head>タグ内に、BootstrapのCSSとJavaScriptのCDNリンクを追加します。

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

3. Breezeのビューファイルを編集

Breezeが生成した認証関連のビューファイル（resources/views/authディレクトリ内）を編集し、Bootstrapのクラスを適用していきます。

例：ログインフォーム (resources/views/auth/login.blade.php)

HTML

<x-guest-layout>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Login') }}</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('login') }}">
                            @csrf

                            <div class="mb-3">
                                <label for="email" class="form-label">{{ __('Email') }}</label>
                                <input id="email" class="form-control" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username">
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label">{{ __('Password') }}</label>
                                <input id="password" class="form-control" type="password" name="password" required autocomplete="current-password">
                            </div>

                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="remember_me" name="remember">
                                <label class="form-check-label" for="remember_me">{{ __('Remember me') }}</label>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="submit" class="btn btn-primary">{{ __('Log in') }}</button>
                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot your password?') }}
                                    </a>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

上記の例では、container, row, col-md-8, card, form-control, btnなどのBootstrapのクラスを適用しています。

4. レイアウトの調整

必要に応じて、resources/views/layouts/app.blade.phpファイルを編集し、全体のレイアウトを調整します。

注意点

BreezeはデフォルトでTailwind CSSを使用するため、Bootstrapと競合する可能性があります。必要に応じてTailwind CSSを無効化するか、カスタマイズしてください。
Breezeはアップデートされる可能性があるため、常に最新のドキュメントを参照してください。
Laravel, Bootstrapともにバージョンアップが頻繁であるため、検索等で表示される情報は古い可能性があります。公式ドキュメントを確認することを強く推奨します。

これらの手順に従うことで、Laravel 11 Breezeで生成される認証機能のテンプレートをBootstrapでカスタマイズすることができます。

ソース

1. https://github.com/0051Nasrulhakim/skripsi_portal_layanan

2. https://unitedwebsoft.in/blog/implement-otp-login-in-laravel-application-project

3. https://github.com/MysticMaccc/meal-tracker-app

4. https://github.com/FeliceDArcangelo/laravel-auth

5. https://github.com/Irfan1011/TechnicalTes

6. https://github.com/AndreaLorenzi/laravel-many-to-many

7. https://github.com/hajikazuo/Coral.Agenda

8. https://github.com/bakle/laravel-starter-kit-bootstrap

9. https://github.com/ASQUAREBIBLIO/Brainy

10. https://github.com/077akm/HouseMarketApp