How to use Bootstrap with Livewire

#1

Hi! I am new to livewire and i find it tedious to quickly design a prototype using tailwind. Can anyone please let me know how can i install and use bootstrap UI framework with livewire? I am using the latest livewire-laravel combo version.

#2

Simply intall bootstrap by running:

npm install bootstrap

And on your resources/js/app.js file include the following:

const bootstrap = require('bootstrap')

or

import bootstrap from 'bootstrap'

The bootstrap module itself exports all plugins.
See: https://getbootstrap.com/docs/5.0/getting-started/download/#package-managers
Finally compile the asset using by running:

npm run dev

This will compile the required css file to your public/css and the js files into public/js folders respectively.

If none of this worked, you can always download the source files and put it manually in your public directory:

Don’t forget to load them in your layouts file using:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
and
<script src="{{ mix('js/app.js') }}" defer></script>

1 Like