🎯 Rács- és Flex rendszer

A Bootstrap 5 .container, .row és .col-* osztályokra épül. A rácsot a flexbox motor működteti, így a d-flex utility-kkel is szabadon kiegészíthető.

Container példa (fix max-szélesség)

col-md-4

Container-fluid példa (teljes szélesség)

col-6 col-md-3

💪 Flexbox alapok

1

2

3

.d-flex + .flex-fill = elemek egy sorban, egyenlő szélességgel

Vízszintes igazítás – `justify-content-*`

Start

Elem

Center

Elem

End

Elem

Between

Elem

Around

Elem

Függőleges igazítás – `align-items-` és `align-self-`

Start

Center

End

A d-flex szülőben az egyes elemek align-self-* osztályokkal önállóan igazíthatók függőlegesen.

Függőleges igazítás – külön sorokban

Start

Elem

Center

Elem

End

Elem

Irány & tördelés – `flex-row` / `flex-column` / `flex-wrap`

Elem 1

Elem 2

Elem 3

Elem 4

Elem 5

.flex-wrap engedélyezi, hogy az elemek új sorba törjenek.

Gap és sorrend

1 (order-3)

2 (order-1)

3 (order-2)

A gap-* spacing a flex-elemek közötti rést szabályozza, az order-* a megjelenítési sorrendet.

🎨 Színek, szöveg és háttér effektek

Bootstrap 5 rengeteg .text-* és .bg-* utility osztályt kínál.

Szöveg színek

.text-primary

.text-success

.text-danger

.text-warning

.text-info

.text-muted

.text-decoration-underline

.fw-bold

.fst-italic

Háttér színek

.bg-primary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-dark

.bg-body-secondary

Keretek és árnyékok

.border .border-primary

.border-3 .border-success

.shadow-sm

.shadow

.shadow-lg

Gradiensek & Átlátszóság

Egyéni gradient background

.bg-danger.bg-opacity-50

.bg-success.bg-opacity-25

.bg-info.bg-opacity-75

Szöveg vágása (Text truncation)

Használd .text-truncate osztályt a túl hosszú szövegek levágására:

Ez egy nagyon hosszú szöveg, amely nem fér ki teljesen a dobozban, ezért három ponttal rövidül.

💡 Ehhez display: inline-block vagy block kell, valamint fix szélesség.

Vertical rule (függőleges elválasztó)

Bal oldal

Jobb oldal

A .vr elem border-left-ot használ, automatikus magassággal és margin-nal.

🧾 Forms – Checks & Radios + Validálás

DEMÓ FORM — HTML5 + Bootstrap validation

@csrf Név (floating)

Név

Kérlek adj meg egy 3–60 karakter közötti nevet.

@error('name')

@enderror

Email (floating)

Email

Valós email címet adj meg.

@error('email')

@enderror

Input group (ikon/gomb)

Felhasználónév

A felhasználónév kötelező.

@error('username')

@enderror

Select

Szerepkör

Kötelező választani.

@error('role')

@enderror

CHECKS (checkboxok)

Értesítések

contains('email'))> Email

contains('sms'))> SMS

contains('push'))> Push (inline)

RADIOS (exkluzív választás)

Terv

Basic

Pro

Válassz tervet.

SWITCH

Elfogadom a feltételeket

A feltételek elfogadása kötelező.

Üzenet (textarea)

Üzenet @error('message')

@enderror

Oldalsáv – magyarázat

ℹ️ Hogyan működik a validálás?

novalidate + .needs-validation a formon
mezőkön HTML5 attribútumok: required, minlength, type=email stb.
minden mező alatt .invalid-feedback blokk
JS a submit eseményre → ha hibás, megakadályozza és ráteszi a .was-validated-et
Laravel hiba esetén: @ error + is-invalid + server üzenet

🎨 Egyedi Bootstrap kiterjesztés `:root` változókkal

A Bootstrap 5.3-tól kezdve a témák és színek CSS változókkal (--bs-*) kezelhetők. Ezeket a :root szintjén bármikor bővítheted vagy felülírhatod, és így saját stílusosztályokat hozhatsz létre.

🔹 Példa: saját színek és gombosztály hozzáadása

/* resources/sass/_custom.scss */
:root {
  /* Saját színek */
  --bs-brand: #7952b3;
  --bs-accent: #ff5722;

  /* Saját árnyalatok a dark módhoz (opcionális) */
  [data-bs-theme="dark"] {
    --bs-brand: #b48cff;
    --bs-accent: #ff8a50;
  }
}

/* Új Bootstrap-kompatibilis osztályok */
.btn-brand {
  --bs-btn-bg: var(--bs-brand);
  --bs-btn-border-color: var(--bs-brand);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-brand) 85%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-brand) 75%, black);
  --bs-btn-color: #fff;
}

.text-accent { color: var(--bs-accent) !important; }
.bg-accent { background-color: var(--bs-accent) !important; }
.border-accent { border-color: var(--bs-accent) !important; }

A _custom.scss fájl az app.scss fájlba van importálva @import "custom"; így az app.blade.php fájl head tag-ban nem kell további vite importokat alkalmazni.
Most már bármelyik komponensnél használhatod:



Ez egy kiemelt szöveg
Accent keretes doboz

🔹 Példa: új Bootstrap CSS változók használata

A Bootstrap rengeteg előre definiált változót tartalmaz, amiket te is használhatsz saját komponensekhez:


.card-custom {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.1);
  transition: background-color 0.3s, color 0.3s;
}

.card-custom:hover {
  background-color: var(--bs-body-bg);
  color: var(--bs-primary);
}

Példa saját kártyára

Ez a doboz a Bootstrap változókat használja — automatikusan vált a Dark / Light mód között!

📘 Összefoglaló

Használd a :root-ban a --bs-* változókat, hogy ne kelljen a Bootstrap forrást módosítanod.
Használj color-mix()-et árnyalatok előállításához.
Tedd a saját CSS-edet a resources/css/app.css vagy custom.css végére, hogy felülírja az alapot.
Ne feledd: a Dark módhoz a [data-bs-theme="dark"] blokkban újra beállíthatod a változókat.

🎨 Bootstrap Icons bemutató

A bootstrap-icons csomag több mint 1800 ikont tartalmaz. Használat: <i class="bi bi-ikon-név"></i>

bi-alarm

bi-arrow-up-circle

bi-bell

bi-box

bi-braces

bi-bug

bi-camera

bi-check-circle

bi-cloud-sun

bi-cpu

bi-github

bi-bootstrap-fill

🧩 Méret, szín, igazítás

Méret: .fs-* osztályokkal

Szín: .text-* osztályokkal

Ikonok gombokon

🔗 Teljes lista: icons.getbootstrap.com

🧩 Komponensek

Accordion

Összecsukható / lenyitható panelcsoport, állapotkezeléssel és animációval.

Bármilyen HTML: listák, képek, gombok, akár formok is.

Alerts

Siker! A művelet lefutott.

Figyelem! Ellenőrizd az adatokat.

Hiba! Valami félrement.

Tipp: használhatsz alert-link stílust is.

Badges

Primary Secondary Success Danger Warning Info Light Dark

Fejléc badge ÚJ

Cards

Kártya cím

Rövid leírás a kártyához. Tökéletes listákhoz, blogkártyákhoz.

Részletek

Frissítve: ma

Egyszerű kártya

Kép nélkül is működik. Tetszés szerint bővíthető listákkal, gombokkal.

🔐 Laravel Sanctum – API token használat (példa)

Előfeltételek: composer require laravel/sanctum → php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" → php artisan migrate. Az api middleware-csoportban legyen az EnsureFrontendRequestsAreStateful is, ha SPA auth-ot használsz.


// routes/api.php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::post('/login', [\App\Http\Controllers\AuthTokenController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/user', function (Request $request) {
        return $request->user();
    });

    Route::post('/logout', [\App\Http\Controllers\AuthTokenController::class, 'logout']);
});


// app/Http/Controllers/AuthTokenController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthTokenController extends Controller
{
    public function login(Request $request)
    {
        $credentials = $request->validate([
            'email'    => ['required','email'],
            'password' => ['required'],
        ]);

        if (! Auth::attempt($credentials)) {
            return response()->json(['message' => 'Invalid credentials'], 401);
        }

        $user  = $request->user();
        $token = $user->createToken('api-token')->plainTextToken;

        return response()->json([
            'token' => $token,
            'token_type' => 'Bearer',
        ]);
    }

    public function logout(Request $request)
    {
        // aktuális token visszavonása
        $request->user()->currentAccessToken()->delete();

        return response()->json(['message' => 'Logged out']);
    }
}


# LOGIN → token visszaadása
curl -X POST http://localhost:8000/api/login \
  -H "Content-Type: application/json" \
  -d '{"email":"user@example.com","password":"secret"}'


# VÉDETT ENDPOINT → Bearer tokennel
curl http://localhost:8000/api/user \
  -H "Authorization: Bearer <TOKEN>"

Megjegyzés: A Route::middleware('auth:sanctum') védi a route-okat. Tokenes módnál az Authorization: Bearer <token> fejléc szükséges. SPA cookie-s módnál állítsd be a config/sanctum.php stateful domainjeit (pl. app.example.com, api.example.com).

🧠 Összefoglalás – mit csinál a Sanctum?

Két mód

Cookie-alapú SPA auth – session cookie-val azonosítja a felhasználót ugyanazon (al)domain alatt.
Token-alapú API auth – Bearer token fejléccel hitelesít külső/mobil klienseknél.

Hogyan tárol?

Tokenek: personal_access_tokens táblában, hash-elve.
Egyszerű auth:sanctum middleware-védelem route-okra.
Gyors és könnyű alternatíva az OAuth2-t igénylő Passporttal szemben.

🩺 Laravel Sanctum – Health-Check és mini Auth UI

Sanctum státusz

Laravel verzió: {{ app()->version() }}

PHP verzió: {{ PHP_VERSION }}

Sanctum telepítve: {{ class_exists('Laravel\\Sanctum\\Sanctum') ? 'igen ✅' : 'nem ❌' }}

@php $stateful = config('sanctum.stateful') ?? []; $hasTokens = \Illuminate\Support\Facades\Schema::hasTable('personal_access_tokens'); @endphp

Token tábla: {{ $hasTokens ? 'rendben ✅' : 'hiányzik ❌' }}

Stateful domainek: {{ implode(', ', (array) $stateful) ?: '— nincs beállítva —' }}

🔐 Token alapú bejelentkezés (demo)

✉️ Laravel Mail – gyors útmutató

A Laravel e-mail küldést Mail facáddal és Mailable osztályokkal végzi. Fejlesztéshez ajánlott: Mailtrap vagy HELO.

# .env (példa Mailtrap smtp-hez)
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=587
MAIL_USERNAME=YOUR_USER
MAIL_PASSWORD=YOUR_PASS
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=noreply@example.com
MAIL_FROM_NAME="Demo App"


// Terminál:
php artisan make:mail DemoMail --markdown=emails.demo

// app/Mail/DemoMail.php
namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class DemoMail extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct(public string $name, public string $messageText) {}

    public function build()
    {
        return $this->subject('Üdv a Demo App-ban')
                    ->markdown('emails.demo', [
                        'name' => $this->name,
                        'messageText' => $this->messageText,
                    ]);
    }
}


{{-- resources/views/emails/demo.blade.php --}}
{{--                            @component('mail::message')--}}
{{--                                # Szia, {{$name}}!--}}

{{--                                {{$messageText}}--}}

{{--                                @component('mail::button', ['url' => config('app.url')])--}}
{{--                                    Ugorj az oldalra--}}
{{--                                @endcomponent--}}

{{--                                Üdv,
--}}
{{--                                {{ config('app.name') }}--}}
{{--                            @endcomponent--}}


// routes/web.php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Mail\DemoMail;

Route::post('/mail-test', function (Request $req) {
    $validated = $req->validate([
        'email' => ['required','email'],
        'name' => ['required','string'],
        'message' => ['required','string'],
    ]);

    Mail::to($validated['email'])->send(
        new DemoMail(name: $validated['name'], messageText: $validated['message'])
    );

    return back()->with('status','Mail elküldve!');
})->name('mail.test');

// (Opcionális) Előnézet böngészőben:
Route::get('/mail-preview', function () {
    return new DemoMail(name: 'István', messageText: 'Ez egy előnézeti üzenet.');
});


# cURL példa (ha a form még nincs kész):
curl -X POST http://localhost:8000/mail-test \
  -H "Content-Type: application/x-www-form-urlencoded" \
  --data "email=you@example.com&name=Istvan&message=Szia%2C%20ez%20egy%20teszt!"

# vagy böngésző:
http://localhost:8000/mail-preview

Gyors tesztküldés (action="route('mail.test')")

@if(session('status'))

@endif

📱 Offcanvas

Ez egy elrejthető/megnyitható oldalsáv.

🎯 Rács- és Flex rendszer

Container példa (fix max-szélesség)

Container-fluid példa (teljes szélesség)

💪 Flexbox alapok

Vízszintes igazítás – justify-content-*

Függőleges igazítás – align-items-* és align-self-*

Függőleges igazítás – külön sorokban

Irány & tördelés – flex-row / flex-column / flex-wrap

Gap és sorrend

🎨 Színek, szöveg és háttér effektek

Szöveg színek

Háttér színek

Keretek és árnyékok

Gradiensek & Átlátszóság

Szöveg vágása (Text truncation)

Vertical rule (függőleges elválasztó)

🧾 Forms – Checks & Radios + Validálás

ℹ️ Hogyan működik a validálás?

🎨 Egyedi Bootstrap kiterjesztés :root változókkal

🔹 Példa: saját színek és gombosztály hozzáadása

🔹 Példa: új Bootstrap CSS változók használata

Példa saját kártyára

📘 Összefoglaló

🎨 Bootstrap Icons bemutató

🧩 Méret, szín, igazítás

⚡ Interaktív példák

Collapse

Carousel

Tooltip & Progress

🧩 Komponensek

Accordion

1. Mit tud a Bootstrap accordion?

2. Milyen tartalmat tehetek bele?

Alerts

Badges

Fejléc badge ÚJ

Cards

Kártya cím

Egyszerű kártya

Theme Settings

Mode

Primary color

🔐 Laravel Sanctum – API token használat (példa)

🧠 Összefoglalás – mit csinál a Sanctum?

Két mód

Hogyan tárol?

🩺 Laravel Sanctum – Health-Check és mini Auth UI

Sanctum státusz

🔐 Token alapú bejelentkezés (demo)

✉️ Laravel Mail – gyors útmutató

Gyors tesztküldés (action="route('mail.test')")

📱 Offcanvas

Offcanvas Menü

🔔 Spinner & Toast

Laravel verzió: {{ app()->version() }}

Vízszintes igazítás – `justify-content-*`

Függőleges igazítás – `align-items-` és `align-self-`

Irány & tördelés – `flex-row` / `flex-column` / `flex-wrap`

🎨 Egyedi Bootstrap kiterjesztés `:root` változókkal