How properly apply bootstrap without cdn in laravel?

Hello everyone, in my layout, I'm using Bootstrap via CDN, along with other links. However, I need to use styles locally. I have a JavaScript file with code and scripts in public/js/script.js and a CSS file with all styles in public/css/app.css. When I remove the CDN link and provide the path directly to the files, Bootstrap stops working. I read somewhere that this can be done using webpack.mix.js, but I don't have it installed in my project, and running npm install doesn't create it. How can I correctly set this up to use Bootstrap and other libraries like jQuery locally? Any guidance would be appreciated. :) Layout looks like this.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url('/css/app.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <title>{{ $title ?? 'Std27 Barbershop' }}</title>
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('img/favicon.png') }}">

    @livewireStyles

</head>

<body>
    <header>
        <livewire:navbar />
    </header>
    <main>
        <livewire:home />
        <livewire:about />
        <livewire:services />
        <livewire:booking>
        {{-- <livewire:gallery /> --}}
    </main>

    <footer>
        <livewire:footer />
    </footer>
    <a href="#úvod" class="to-top" id="top-arrow">
        <i class="bi bi-arrow-up-square-fill"></i>
    </a>
    @livewireScripts

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url('/js/script.js') }}"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('/js/app.js') }}"></script>

    <x-livewire-alert::scripts />

</body>

</html>

martinbean

2 years ago

Best Answer

Level 80

@jakubjv Bootstrap does not require jQuery, and hasn’t for a while now. Laravel also ships with Vite these days to bundle assets instead of Webpack.

I use Bootstrap myself in multiple projects, and these are the steps I take:

Run npm install bootstrap --save-dev
Create a file at resources/sass/app.scss with the following contents:

@import "bootstrap/scss/bootstrap";

Create a file at resources/js/app.js (if it doesn’t exist already) with the following contents:

import 'bootstrap';

In your vite.config.js, you need to add the above two files to the input array.
Run npm run build
If it complains about the sass dependency missing, then run npm install sass --save-dev and then run npm run build again.

In your Blade layout file, you then need to include the files generated by Vite:

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

2 likes

jakubjv

2 years ago

Level 2

@martinbean Very good answer, look like it almost working, , structure of website is ok, but ican see that some styles are missing, like hover and transtitions doesnt work like before :/

technofreaks

2 years ago

Level 1

@jakubjv Style depends on bootstrap css (style sheet), To download specific version of bootstrap

npm install [email protected]  --save

Please or to participate in this conversation.