Hướng dẫn tích hợp Bootstrap vào Laravel 8

Chào các bạn, như tiêu đề ở trên thì trong bài viết này mình sẽ hướng dẫn các bạn cách tích hợp bootstrap vào trong Laravel.

Nếu như bạn là người mới biết đến Laravel hoặc chưa biết cách tích hợp Boostrap vào Laravel thì bạn có thể làm theo các bước ở bên dưới.

Trước khi đi vào chi tiết thì mình sẽ giải thích một chút. Chúng ta sẽ dùng một package tên là laravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko?

Thật ra laravel/ui còn nhiều tác dụng khác nữa. Ngoài bootstrap ra thì nó còn được sử dụng để giúp các bạn setup, tích hợp Vue/React vào Laravel một cách dễ nhất nữa đó.

Với lại hiện tại Laravel không tích hợp sẵn command tạo bộ Auth (make:auth) nên bạn cũng có thể dùng thằng này để tạo ra giao diện cho Auth luôn được.

Cài đặt laravel/ui

Vì đây là package nên các bạn phải cài đặt trước mơi dùng được nhé. Cài bằng lệnh sau:

composer require laravel/ui

Sau khi mà các bạn cài xong thì qua phần tiếp để dùng nhé.

Tích hợp Bootstrap vào Laravel

Chạy lệnh sau để cài bootstrap:

php artisan ui bootstrap

Chạy lệnh sau để cài bootstrap kèm theo auth:

php artisan ui bootstrap --auth

Sau khi chạy lệnh để tích hợp rồi việc cần làm tiếp theo là dùng npm để chạy. Nếu bạn chưa cài các dependencies của npm thì chạy lệnh sau:

npm install

Tiếp theo là lệnh sau:

npm run dev

Sau khi chạy xong thì các bạn sẽ thấy nó tạo cho chúng ta 2 file css và js. Các bạn chỉ cần dùng là được nhé.

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
   
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">