Hari ini, saya akan memberi tahu Anda contoh cara menginstal bootstrap 5 di laravel 10. mari kita bahas tentang menginstal bootstrap di laravel 10. Contoh ini akan membantu Anda cara menginstal bootstrap 5 di laravel 10 dengan vite. Anda akan belajar laravel 10 vite bootstrap 5.
Jika Anda ingin menginstal bootstrap 5 menggunakan vite di laravel 10. Maka saya akan membantu Anda menjelaskan langkah demi langkah menginstal bootstrap 5 dengan npm vite. jadi, mari ikuti langkah di bawah ini untuk menambahkan bootstrap di aplikasi laravel 10.
Mari kita lihat langkah-langkah berikut:
Langkah 1: Instal Aplikasi Laravel 10
Langkah ini tidak diperlukan; namun, jika Anda belum membuat aplikasi laravel, Anda dapat melanjutkan dan menjalankan perintah di bawah ini:
composer create-project laravel/laravel example-appLangkah 2: Instal Paket Laravel UI
Di sini, kami akan menginstal paket laravel ui yang memungkinkan untuk menginstal bootstrap dengan auth. jadi, mari kita jalankan perintah berikut:
composer require laravel/ui --devLangkah 3: Instal Bootstrap Auth Scaffolding
Di sini, kami akan menambahkan bootstrap dengan auth scaffolding. jadi, mari kita jalankan perintah berikut:
php artisan ui bootstrap --auth Langkah 4: Install Icon Bootstrap
Pada langkah ini, kami akan menambahkan ikon bootstrap. jadi, mari kita jalankan perintah berikut:
npm install bootstrap-icons --save-devsekarang, impor ikon css pada file resources\sass\app.scss seperti kode di bawah ini:
resources\sass\app.scss
/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';Langkah 5: Buat File CSS & JS
Pada langkah ini, kita akan membuat file css dan js. jadi, mari kita jalankan dua perintah berikut:
npm install
npm run build
Langkah 6: Gunakan Class Bootstrap
Di sini, kami akan memperbarui file welcome.blade.php dan menggunakan kelas bootstrap.
resources\view\welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style type="text/css">
i{
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<main class="container">
<h1> How to Install Bootstrap 5 in Laravel 10 - Medikre.com</h1>
<div class="card">
<div class="card-header">
Icons
</div>
<div class="card-body text-center">
<i class="bi bi-bag-heart-fill"></i>
<i class="bi bi-app"></i>
<i class="bi bi-arrow-right-square-fill"></i>
<i class="bi bi-bag-check-fill"></i>
<i class="bi bi-calendar-plus-fill"></i>
</div>
</div>
</main>
</div>
</body>
</html>Run Laravel App:
Semua langkah yang diperlukan telah dilakukan, sekarang Anda harus mengetikkan perintah di bawah ini dan tekan enter untuk menjalankan aplikasi Laravel:
php artisan serveSekarang, Buka browser web Anda, ketik URL yang diberikan dan lihat keluaran aplikasi:
http://localhost:8000/
Saya harap ini dapat membantu Anda ...
laravel laravel bootstrap
andriajah