Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for bootstrap 4 #11

Open
sbrow opened this issue Nov 29, 2021 · 4 comments
Open

Support for bootstrap 4 #11

sbrow opened this issue Nov 29, 2021 · 4 comments

Comments

@sbrow
Copy link

sbrow commented Nov 29, 2021

Any chance you could add support for bootstrap 4?

It seems all that needs to change is the javascript that you import:

// modals-bs4.js
let modalsElement = document.getElementById('laravel-livewire-modals');

$(modalsElement).on('hidden.bs.modal', () => {
  Livewire.emit('resetModal');
});

Livewire.on('showBootstrapModal', () => {
  $(modalsElement).modal('show');
});

Livewire.on('hideModal', () => {
  $(modalsElement).modal('hide');
});

Thanks, love the package!

@feliperafael
Copy link

I was having trouble upgrading to bootstrap 5 so I used your script. Worked perfectly. Thank you =)

@seongbae
Copy link

seongbae commented Mar 4, 2022

Where do I put that javascript if you don't mind me asking?

@sbrow
Copy link
Author

sbrow commented Mar 4, 2022

Where do I put that javascript if you don't mind me asking?

Put it in a separate script and import it after 'bootstrap'.

@madurapa
Copy link

Also, you have to modify the modal template a bit to prevent close on the escape key,

  1. publish the view (if you've not already done) php artisan vendor:publish --tag=laravel-livewire-modals:views
  2. modify data attributes to fit the BS v4 (remove extra bs) in resources/views/vendor/laravel-livewire-modals/modals.blade.php

eg: data-bs-backdrop="static" to data-backdrop="static"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants