#การใช้งาน Bootstrap กับ Laravel 13 ด้วย Vite

Bootstrap เป็น Frontend CSS Framework ที่ช่วยให้พัฒนา Web UI ได้รวดเร็ว โดยมีทั้ง Grid System, Utility Classes และ Components สำเร็จรูป เช่น Navbar, Card, Form, Alert, Modal, Dropdown และ Offcanvas

สำหรับ Laravel 13 แนวทางที่เหมาะกับโครงการปัจจุบันคือการติดตั้ง Bootstrap ผ่าน npm และให้ Vite ทำหน้าที่จัดการ CSS และ JavaScript Assets แทนการอ้างอิง Bootstrap ผ่าน CDN โดยตรง

สถาปัตยกรรมโดยรวมมีลักษณะดังนี้

Laravel
   │
   ├── Blade Templates
   │
   ├── resources/css หรือ resources/scss
   │          │
   │          └── Bootstrap CSS / Sass
   │
   ├── resources/js/app.js
   │          │
   │          └── Bootstrap JavaScript
   │
   └── Vite
          │
          ├── Development Server
          └── Production Build

#ทำไมควรใช้ Bootstrap ผ่าน npm + Vite

Bootstrap สามารถใช้งานผ่าน CDN ได้ แต่สำหรับ Laravel Application ที่ต้องพัฒนาจริง การติดตั้งผ่าน npm มีข้อได้เปรียบหลายด้าน เช่น

  • กำหนด Version ของ Bootstrap ผ่าน package.json
  • ใช้งานร่วมกับ Laravel Vite ได้โดยตรง
  • ทำ Production Build ได้
  • Custom Theme ผ่าน Sass ได้
  • Import JavaScript Component เฉพาะส่วนได้
  • เหมาะกับ Git, CI/CD และ Team Development
  • ลดปัญหา Version ของ Frontend Libraries ไม่ตรงกันระหว่างเครื่อง

แนวทางที่แนะนำจึงเป็น

Laravel + Blade + Bootstrap + npm + Vite

#1. เตรียม Environment

ตรวจสอบ PHP

php -v

ตรวจสอบ Composer

composer -V

ตรวจสอบ Node.js

node -v

ตรวจสอบ npm

npm -v

#2. สร้าง Laravel Project

สร้าง Project ใหม่

composer create-project laravel/laravel laravel-bootstrap

เข้าไปยัง Project

cd laravel-bootstrap

ติดตั้ง Frontend Dependencies

npm install

Laravel 13 ใช้ Vite สำหรับ Compile และ Bundle CSS/JavaScript Assets

#3. ติดตั้ง Bootstrap

Bootstrap 5.3 สามารถติดตั้งผ่าน npm ได้

npm install bootstrap @popperjs/core

ตรวจสอบ Version

npm list bootstrap

ตัวอย่าง

bootstrap@5.3.8

@popperjs/core ใช้สำหรับ Component ที่ต้องคำนวณตำแหน่ง เช่น

  • Dropdown
  • Tooltip
  • Popover

#4. วิธีที่ 1: Import Bootstrap CSS โดยตรง

เปิดไฟล์

resources/css/app.css

เพิ่ม

@import "bootstrap/dist/css/bootstrap.min.css";

body {
    background-color: #f8f9fa;
}

จากนั้นเปิด

resources/js/app.js

เพิ่ม

import './bootstrap';
import '../css/app.css';
import 'bootstrap';

เมื่อ Import bootstrap แล้ว Component ที่ต้องใช้ JavaScript เช่น Modal, Dropdown, Collapse และ Offcanvas จะสามารถทำงานได้

#5. ตรวจสอบ Vite Configuration

เปิด

vite.config.js

ตัวอย่าง Configuration สำหรับ Laravel

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

ค่า refresh: true ช่วยให้ Browser Refresh เมื่อ Blade Template หรือ Assets มีการเปลี่ยนแปลงระหว่าง Development

#6. เรียกใช้ Vite Assets ใน Blade

สร้าง Layout

resources/views/layouts/app.blade.php

ตัวอย่าง

<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <title>
        @yield('title', 'Laravel Bootstrap')
    </title>

    @vite([
        'resources/css/app.css',
        'resources/js/app.js'
    ])
</head>

<body>

    @include('layouts.navbar')

    <main class="container py-4">

        @yield('content')

    </main>

</body>
</html>

Directive

@vite(...)

ทำหน้าที่โหลด Assets จาก Vite Development Server ขณะพัฒนา และโหลด Production Assets เมื่อ Build แล้ว

#7. สร้าง Navbar ด้วย Bootstrap

สร้างไฟล์

resources/views/layouts/navbar.blade.php

ตัวอย่าง

<nav
    class="navbar navbar-expand-lg bg-dark"
    data-bs-theme="dark"
>

    <div class="container">

        <a
            class="navbar-brand"
            href="{{ url('/') }}"
        >
            Laravel Bootstrap
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="mainNavbar"
        >

            <ul class="navbar-nav ms-auto">

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="{{ url('/') }}"
                    >
                        Home
                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="{{ route('products.index') }}"
                    >
                        Products
                    </a>

                </li>

            </ul>

        </div>

    </div>

</nav>

Bootstrap JavaScript จะทำให้ Navbar Toggle สามารถยุบและขยายได้บน Mobile

#8. สร้างหน้า Home ด้วย Bootstrap

สร้าง

resources/views/home.blade.php

@extends('layouts.app')

@section('title', 'Home')

@section('content')

<div class="row">

    <div class="col-lg-8 mx-auto">

        <div class="card shadow-sm">

            <div class="card-body p-4">

                <h1 class="card-title">
                    Laravel + Bootstrap
                </h1>

                <p class="card-text text-secondary">
                    ตัวอย่างการใช้งาน Bootstrap 5
                    ร่วมกับ Laravel Blade และ Vite
                </p>

                <a
                    href="#"
                    class="btn btn-primary"
                >
                    Get Started
                </a>

            </div>

        </div>

    </div>

</div>

@endsection

Bootstrap Grid System ใช้โครงสร้างหลัก

container
   │
   └── row
        │
        ├── col-md-6
        └── col-md-6

จึงสร้าง Responsive Layout ได้โดยไม่ต้องเขียน CSS Media Query เองทั้งหมด

#9. กำหนด Route

เปิด

routes/web.php

เพิ่ม

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');
});

#10. รัน Laravel และ Vite

เปิด Terminal แรก

php artisan serve

เปิด Terminal ที่สอง

npm run dev

เข้าใช้งาน

http://127.0.0.1:8000

Development Flow จะเป็น

Browser
   │
   ├── Laravel Dev Server :8000
   │
   └── Vite Dev Server
          │
          ├── Bootstrap CSS
          └── Bootstrap JS

#11. ตัวอย่าง Bootstrap Form กับ Laravel

สมมติว่ามี Resource Route

use App\Http\Controllers\ProductController;

Route::resource('products', ProductController::class);

สร้างฟอร์ม

<form
    method="POST"
    action="{{ route('products.store') }}"
>

    @csrf

    <div class="mb-3">

        <label
            for="name"
            class="form-label"
        >
            Product Name
        </label>

        <input
            type="text"
            id="name"
            name="name"
            value="{{ old('name') }}"
            class="form-control
                   @error('name') is-invalid @enderror"
        >

        @error('name')

            <div class="invalid-feedback">
                {{ $message }}
            </div>

        @enderror

    </div>

    <div class="mb-3">

        <label
            for="price"
            class="form-label"
        >
            Price
        </label>

        <input
            type="number"
            id="price"
            name="price"
            step="0.01"
            value="{{ old('price') }}"
            class="form-control
                   @error('price') is-invalid @enderror"
        >

        @error('price')

            <div class="invalid-feedback">
                {{ $message }}
            </div>

        @enderror

    </div>

    <button
        type="submit"
        class="btn btn-primary"
    >
        Save
    </button>

</form>

Laravel Validation สามารถทำงานร่วมกับ Bootstrap ได้โดยใช้

is-invalid

และ

invalid-feedback

#12. Validation ใน Controller

ตัวอย่าง

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => [
            'required',
            'string',
            'max:255',
        ],
        'price' => [
            'required',
            'numeric',
            'min:0',
        ],
    ]);

    Product::create($validated);

    return redirect()
        ->route('products.index')
        ->with(
            'success',
            'Product created successfully.'
        );
}

#13. แสดง Flash Message ด้วย Bootstrap Alert

ใน Blade Layout หรือ View

@if (session('success'))

    <div
        class="alert alert-success alert-dismissible fade show"
        role="alert"
    >

        {{ session('success') }}

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="alert"
            aria-label="Close"
        ></button>

    </div>

@endif

เมื่อ Bootstrap JavaScript ถูก Import แล้ว ปุ่มปิด Alert จะทำงานได้อัตโนมัติ

#14. แสดงข้อมูลด้วย Bootstrap Table

<div class="table-responsive">

    <table
        class="table table-striped table-hover align-middle"
    >

        <thead>

            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
                <th>Action</th>
            </tr>

        </thead>

        <tbody>

            @foreach ($products as $product)

                <tr>

                    <td>
                        {{ $product->id }}
                    </td>

                    <td>
                        {{ $product->name }}
                    </td>

                    <td>
                        {{ number_format($product->price, 2) }}
                    </td>

                    <td>

                        <a
                            href="{{ route(
                                'products.edit',
                                $product
                            ) }}"
                            class="btn btn-sm btn-warning"
                        >
                            Edit
                        </a>

                    </td>

                </tr>

            @endforeach

        </tbody>

    </table>

</div>

ใช้ table-responsive เพื่อให้ Table สามารถ Scroll บนหน้าจอขนาดเล็กได้

#15. ใช้ Bootstrap Modal

ปุ่มเปิด Modal

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
>
    Open Modal
</button>

Modal

<div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
>

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="exampleModalLabel"
                >
                    Laravel Bootstrap
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>

            </div>

            <div class="modal-body">

                Bootstrap Modal
                ทำงานร่วมกับ Laravel Blade

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>

            </div>

        </div>

    </div>

</div>

Bootstrap ใช้ data-bs-* attributes เพื่อควบคุม Component หลายประเภทโดยไม่จำเป็นต้องเขียน JavaScript เพิ่ม

#16. ใช้ Bootstrap Card

<div class="card shadow-sm">

    <div class="card-body">

        <h5 class="card-title">
            Product
        </h5>

        <p class="card-text">
            Product description
        </p>

        <a
            href="#"
            class="btn btn-primary"
        >
            View
        </a>

    </div>

</div>

ตัวอย่าง Layout หลาย Card

<div class="row g-4">

    @foreach ($products as $product)

        <div class="col-md-6 col-lg-4">

            <div class="card h-100 shadow-sm">

                <div class="card-body">

                    <h5 class="card-title">
                        {{ $product->name }}
                    </h5>

                    <p class="card-text">

                        {{ number_format(
                            $product->price,
                            2
                        ) }}

                    </p>

                </div>

            </div>

        </div>

    @endforeach

</div>

#17. วิธีที่ 2: ใช้ Sass เพื่อ Custom Bootstrap

หากต้องการแก้ Theme ของ Bootstrap เช่น

  • Primary Color
  • Secondary Color
  • Font
  • Border Radius
  • Spacing
  • Component Variables

แนะนำให้ใช้ Sass

ติดตั้ง Sass

npm install --save-dev sass

สร้าง

resources/scss/app.scss

ตัวอย่าง

$primary: #6f42c1;
$success: #198754;
$border-radius: 0.75rem;

@import "bootstrap/scss/bootstrap";

body {
    background-color: #f8f9fa;
}

#18. ตั้งค่า Vite สำหรับ Sass

แก้

vite.config.js

เป็น

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

จากนั้นแก้ Blade

@vite([
    'resources/scss/app.scss',
    'resources/js/app.js'
])

และไม่ต้อง Import resources/css/app.css ซ้ำ

#19. Import Bootstrap JavaScript แบบเลือกเฉพาะ Component

หาก Application ใช้ Bootstrap JavaScript เพียงบางส่วน สามารถ Import เฉพาะ Component เพื่อช่วยลด Bundle Size ได้

ตัวอย่าง

import Modal from 'bootstrap/js/dist/modal';
import Dropdown from 'bootstrap/js/dist/dropdown';

window.Modal = Modal;
window.Dropdown = Dropdown;

หรือ

import {
    Tooltip,
    Toast,
    Popover
} from 'bootstrap';

แทนการ Import Bootstrap ทั้งชุด

import 'bootstrap';

#20. Bootstrap Icons

Bootstrap Icons เป็น Package แยกจาก Bootstrap

ติดตั้ง

npm install bootstrap-icons

Import ใน

resources/css/app.css

ด้วย

@import "bootstrap/dist/css/bootstrap.min.css";
@import "bootstrap-icons/font/bootstrap-icons.css";

จากนั้นใช้งาน

<button class="btn btn-primary">

    <i class="bi bi-plus-circle"></i>

    Add Product

</button>

#21. Build สำหรับ Production

ระหว่างพัฒนา

npm run dev

เมื่อต้อง Deploy

npm run build

Vite จะสร้าง Production Assets ที่ผ่านการ Bundle และ Optimization

โดยทั่วไปจะอยู่ใน

public/build/

Laravel จะอ่าน Manifest ของ Vite ผ่าน @vite() และเลือกไฟล์ Production ที่ถูกต้องโดยอัตโนมัติ

#22. ไม่ควรแก้ไฟล์ใน node_modules

ไม่ควรแก้ Bootstrap Source โดยตรงที่

node_modules/bootstrap/

เพราะเมื่อรัน

npm install

หรือ Update Dependency การแก้ไขอาจถูกเขียนทับ

ควรปรับ Theme ผ่าน

resources/css/

หรือ

resources/scss/

แทน

#23. CDN กับ npm + Vite ต่างกันอย่างไร

#Bootstrap CDN

เหมาะกับ

  • Prototype
  • Demo
  • Workshop ขนาดเล็ก
  • หน้า HTML ที่ไม่มี Build Pipeline

ตัวอย่าง

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
    rel="stylesheet"
>

และ

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>

#npm + Vite

เหมาะกับ

  • Laravel Application จริง
  • Team Development
  • Custom Theme
  • CI/CD
  • Production Build
  • Version Control
  • Project ที่ต้อง Optimize Assets

ติดตั้ง

npm install bootstrap @popperjs/core

สำหรับ Laravel Project ทั่วไป แนะนำ npm + Vite

#24. โครงสร้าง Project ที่แนะนำ

laravel-bootstrap/
│
├── app/
│
├── public/
│
├── resources/
│   │
│   ├── css/
│   │   └── app.css
│   │
│   ├── js/
│   │   └── app.js
│   │
│   ├── scss/
│   │   └── app.scss
│   │
│   └── views/
│       │
│       ├── layouts/
│       │   ├── app.blade.php
│       │   └── navbar.blade.php
│       │
│       ├── products/
│       │   ├── index.blade.php
│       │   ├── create.blade.php
│       │   └── edit.blade.php
│       │
│       └── home.blade.php
│
├── routes/
│   └── web.php
│
├── package.json
└── vite.config.js

#25. Workflow การพัฒนา

Create Laravel Project
        │
        ▼
npm install
        │
        ▼
Install Bootstrap
        │
        ▼
npm install bootstrap @popperjs/core
        │
        ▼
Import Bootstrap CSS / Sass
        │
        ▼
Import Bootstrap JavaScript
        │
        ▼
Configure Vite Entry
        │
        ▼
Use @vite() in Blade
        │
        ▼
Build UI with Bootstrap
        │
        ▼
npm run dev
        │
        ▼
Develop / Test
        │
        ▼
npm run build
        │
        ▼
Deploy

#26. Best Practices

#26.1 ใช้ npm + Vite สำหรับ Production Project

ช่วยให้ Dependency Versions อยู่ใน package.json และ package-lock.json ทำให้ Environment ระหว่าง Developer และ CI/CD ใกล้เคียงกัน

#26.2 แยก Blade Layout

ใช้

resources/views/layouts/app.blade.php

เป็น Layout กลาง เพื่อลด HTML ซ้ำ

#26.3 สร้าง Blade Components สำหรับ UI ที่ใช้ซ้ำ

ตัวอย่าง

resources/views/components/

อาจประกอบด้วย

alert.blade.php
button.blade.php
card.blade.php
modal.blade.php

#26.4 ใช้ Validation ของ Laravel คู่กับ Bootstrap

Laravel

@error('name')

ทำงานร่วมกับ

is-invalid
invalid-feedback

ได้อย่างเป็นธรรมชาติ

#26.5 ใช้ Sass เมื่อต้องมี Design System

ถ้า Application ต้องมี Theme เฉพาะองค์กร ควรใช้ Bootstrap Sass Variables แทนการ Override CSS จำนวนมากภายหลัง

#26.6 Import JavaScript เท่าที่จำเป็น

Project ที่ต้อง Optimize ขนาด Bundle สามารถ Import เฉพาะ Bootstrap Plugins ที่ใช้งาน

#26.7 อย่าแก้ Production Build ด้วยมือ

ไม่ควรแก้ไฟล์ภายใน

public/build/

เพราะเป็น Generated Assets จาก

npm run build

ควรแก้ Source ใน resources/ แล้ว Build ใหม่

#27. คำสั่งที่ใช้บ่อย

สร้าง Laravel Project

composer create-project laravel/laravel laravel-bootstrap

ติดตั้ง Frontend Dependencies

npm install

ติดตั้ง Bootstrap

npm install bootstrap @popperjs/core

ติดตั้ง Sass

npm install --save-dev sass

ติดตั้ง Bootstrap Icons

npm install bootstrap-icons

รัน Laravel

php artisan serve

รัน Vite Development Server

npm run dev

Build Production

npm run build

#สรุป

การใช้งาน Bootstrap กับ Laravel 13 ไม่ซับซ้อน เพราะ Laravel มี Vite เป็นระบบจัดการ Frontend Assets อยู่แล้ว

ขั้นตอนหลักคือ

composer create-project laravel/laravel laravel-bootstrap

cd laravel-bootstrap

npm install

npm install bootstrap @popperjs/core

npm run dev

จากนั้น Import Bootstrap CSS และ JavaScript เข้าสู่ Vite Pipeline แล้วเรียก Assets ผ่าน Blade ด้วย

@vite([
    'resources/css/app.css',
    'resources/js/app.js'
])

เมื่อเชื่อมต่อเรียบร้อยแล้ว Bootstrap สามารถนำมาใช้กับ Laravel Blade เพื่อสร้าง

  • Responsive Layout
  • Navbar
  • Form
  • Validation UI
  • Table
  • Card
  • Alert
  • Modal
  • CRUD Interface
  • Admin Dashboard

ได้อย่างรวดเร็ว

ถ้าต้องการ Customize UI อย่างจริงจัง ควรใช้

Bootstrap Sass + Laravel Vite

ส่วน Application ทั่วไปสามารถเริ่มจาก

Bootstrap CSS + Bootstrap JavaScript + Blade

ได้ทันที

สถาปัตยกรรมที่แนะนำคือ

Laravel
   +
Blade
   +
Bootstrap 5.3
   +
Vite
   +
npm

ซึ่งเป็นแนวทางที่ดูแล Dependency ได้ง่าย รองรับ Development/Production Build และเหมาะสำหรับการนำไปต่อยอดเป็น Web Application ขนาดจริง

#References