{"id":58031,"date":"2025-10-03T09:55:40","date_gmt":"2025-10-03T02:55:40","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=58031"},"modified":"2026-02-16T10:13:21","modified_gmt":"2026-02-16T03:13:21","slug":"belajar-laravel-bagian-23","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-laravel-bagian-23\/","title":{"rendered":"Belajar Laravel Bagian 23: Menggunakan Bootstrap Di Laravel"},"content":{"rendered":"\n

Pada seri belajar Laravel bagian 22, kita telah membahas cara membuat fitur forgot password<\/em> di Laravel. Di seri ini, kita akan melanjutkan pembelajaran dengan mempelajari cara menggunakan bootstrap di Laravel untuk mempercantik tampilan aplikasi.<\/p>\n\n\n\n

Dalam membangun sebuah aplikasi berbasis web, tampilan website menjadi salah satu aspek penting yang memengaruhi kenyamanan pengguna. Laravel adalah salah satu framework <\/em>PHP yang populer menawarkan fleksibilitas yang terintegrasi dengan berbagai library front-end<\/em>, salah satunya bootstrap<\/a>. <\/p>\n\n\n\n

Dengan menggunakan bootstrap, developer <\/em>dapat membuat tampilan website yang responsif, keren, modern, dan konsisten tanpa perlu lagi menulis banyak kode CSS dari nol secara manual. <\/p>\n\n\n\n

Pada artikel ini, kami akan membahas cara menggunakan dan mengintegrasikan Bootstrap ke dalam proyek yang dibuat menggunakan Laravel, mulai dari instalasi hingga penerapannya dalam view<\/em>. Berikut ini pembahasannya.<\/p>\n\n\n\n

Persiapan Sistem<\/h2>\n\n\n\n

Jika Anda sudah mengikuti rangkaian tutorial belajar Laravel<\/a> sebelumnya, maka langkah pertama ini bisa dilewati. Namun, bagi Anda yang belum memiliki Laravel, silakan lakukan instalasi terlebih dahulu sesuai panduan di tutorial Laravel bagian 1.<\/p>\n\n\n\n

Caranya, masuk ke folder tempat Laravel akan diinstal, lalu jalankan perintah berikut:<\/p>\n\n\n\n

<\/code>composer create-project --prefer-dist laravel\/laravel .<\/code><\/pre>\n\n\n\n
Cara Memasang Bootstrap di Laravel<\/h2>\n\n\n\n
Sampai tahap ini, Laravel Anda seharusnya sudah bisa diakses. Selanjutnya, kita akan menambahkan Bootstrap ke dalam Laravel. Ada dua cara yang bisa digunakan. <\/p>\n\n\n\n
Cara pertama adalah cara cepat, sedangkan cara kedua lebih direkomendasikan karena memanfaatkan perintah Artisan Laravel, sehingga struktur proyek menjadi lebih rapi dan teratur.<\/p>\n\n\n\n
Cara 1<\/strong>: CDN (paling cepat)<\/h3>\n\n\n\n
Untuk cara pertama ini, silakan Anda edit manual file resources\/views\/welcome.blade.php<\/em> kemudian tambahkan Bootstrap CDN di bagian <head><\/strong>. Berikut contohnya: <\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title>Laravel Bootstrap Demo<\/title>\n    <!-- Bootstrap CSS -->\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<\/head>\n<body>\n<div class=\"container mt-5\">\n    <h1 class=\"text-center text-primary\">Hello, ini adalah Bootstrap + Laravel!<\/h1>\n\n    <div class=\"card shadow mt-4\">\n        <div class=\"card-header bg-primary text-white\">Demo Card<\/div>\n        <div class=\"card-body\">\n            <p>Ini adalah contoh penggunaan Bootstrap di Laravel.<\/p>\n            <button class=\"btn btn-success\">Klik Saya Ya<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Bootstrap JS -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
Kemudian, jalankan program Laravel Anda dengan perintah berikut.  <\/p>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\n
Akses melalui browser alamat http:\/\/127.0.0.1:8000\/<\/code> kemudian akan tampil halaman seperti berikut.<\/p>\n\n\n\n
\"Cara<\/a><\/figure>\n\n\n\n
Dengan tampilan tersebut, berarti Bootstrap telah terhubung dengan website Laravel Anda.<\/p>\n\n\n\n
Cara 2<\/strong>: Install via NPM <\/h3>\n\n\n\n
Cara kedua bisa Anda pilih agar tampilan bootstrap lebih rapi dan mungkin akan lebih cocok untuk project <\/em>besar Anda. Berikut langkah-langkahnya:<\/p>\n\n\n\n
Step 1. Install Bootstrap<\/h4>\n\n\n\n
Install Bootstrap melalui terminal menggunakan perintah:<\/p>\n\n\n\n
npm install bootstrap<\/code><\/pre>\n\n\n\n
\"Cara<\/a><\/figure>\n\n\n\n
Step 2. Import Bootstrap di resources\/js\/app.js<\/h4>\n\n\n\n
Selanjutnya, buka file resources\/js\/app.js<\/em>, kemudian tambahkan import Bootstrap berikut:<\/p>\n\n\n\n
import '.\/bootstrap';\nimport 'bootstrap\/dist\/js\/bootstrap.bundle.min.js';\nimport '..\/css\/app.css';<\/code><\/pre>\n\n\n\n
Step 3. Import CSS Bootstrap<\/h4>\n\n\n\n
Berikutnya, silakan import <\/em>CSS Bootsrap. Untuk melakukannya Anda bisa buka resources\/css\/app.css<\/em> lalu tambahkan:<\/p>\n\n\n\n
@import \"bootstrap\/dist\/css\/bootstrap.min.css\";<\/code><\/pre>\n\n\n\n
Step 4. Compile asset dengan Vite<\/h4>\n\n\n\n
Langkah berikutnya, kita akan melakukan compile asset dengan Vite dengan perintah berikut:<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\n
atau untuk build production:<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Step 5. Pastikan Blade sudah memanggil Vite<\/h4>\n\n\n\n
Di file resources\/views\/welcome.blade.php<\/em> atau layout utama (misalnya resources\/views\/layouts\/app.blade.php<\/em>), tambahkan:<\/p>\n\n\n\n
@vite(['resources\/css\/app.css', 'resources\/js\/app.js'])<\/code><\/pre>\n\n\n\n
6. Tes Bootstrap<\/h4>\n\n\n\n
Edit welcome.blade.php<\/em> menjadi misalnya berikut:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Laravel + Bootstrap<\/title>\n    @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])\n<\/head>\n<body class=\"p-5\">\n\n    <div class=\"container\">\n        <h1 class=\"text-primary\">Hello, Bootstrap di Laravel!<\/h1>\n        <button class=\"btn btn-success\">Tombol Bootstrap<\/button>\n    <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Selamat, sampai disini projek Laravel Anda telah terhubung dengan Bootstrap. Berikut adalah contoh tampilan default bootstrap yang telah kita buat. <\/p>\n\n\n\n
\"Belajar<\/a><\/figure>\n\n\n\n
Selanjutnya, Anda dapat membuat tampilannya dengan memaksimalkan komponen-komponen yang disediakan bootstrap. <\/p>\n\n\n\n
Penutup<\/strong><\/h2>\n\n\n\n
Mengintegrasikan Bootstrap di Laravel ternyata tidaklah sulit. Dengan Bootstrap, Anda bisa lebih cepat membangun tampilan website yang responsif dan profesional tanpa harus membuat semuanya secara manual dari awal. <\/p>\n\n\n\n
Ikuti terus seri belajar laravel lengkap dari Rumahweb Indonesia untuk mendapatkan panduan terbaru seputar penggunaan Laravel. Di seri belajar laravel selanjutnya, kita akan melanjutkan tentang cara memaksimalkan komponen bootstrap di Laravel. <\/p>\n","protected":false},"excerpt":{"rendered":"
Pada seri belajar Laravel bagian 22, kita telah membahas cara membuat fitur forgot password di Laravel. Di seri ini, kita akan melanjutkan pembelajaran dengan mempelajari cara menggunakan bootstrap di Laravel untuk mempercantik tampilan aplikasi. Dalam membangun sebuah aplikasi berbasis web, tampilan website menjadi salah satu aspek penting yang memengaruhi kenyamanan pengguna. Laravel adalah salah satu […]<\/p>\n","protected":false},"author":319,"featured_media":58063,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1587,796,1497],"class_list":{"0":"post-58031","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-laravel","9":"tag-laravel","10":"tag-tutorial-laravel"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/58031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/319"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=58031"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/58031\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/58063"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=58031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=58031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=58031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}