Using sweetalert2 with bootstrap 4

Question

I'm using sweetAlert2 and I'm trying to use bootstrap 4 to style buttons, setting the properties:

buttonsStyling: false,
confirmButtonClass: 'btn btn-primary btn-lg',
cancelButtonClass: 'btn btn-lg'

It works, however the showLoaderOnConfirm option is being shown in a very ugly style when I set those properties above.

You can check the examples below:

Steps to reproduce:

• Input a valid email;
• Press Submit;
• See the loader (style) for the first (that's using bs4 and for the second, with the default style from swal2).

The question is: How can I let the default style for the loader (using bs4)? Or maybe customize the style for the showLoaderOnConfirm option...

Answer 1

Live demo from the official website: https://sweetalert2.github.io/recipe-gallery/bootstrap.html

Swal.fire({
  title: 'SweetAlert2 + Bootstrap 4',
  input: 'text',
  buttonsStyling: false,
  showCancelButton: true,
  customClass: {
    confirmButton: 'btn btn-primary btn-lg',
    cancelButton: 'btn btn-danger btn-lg',
    loader: 'custom-loader'
  },
  loaderHtml: '<div class="spinner-border text-primary"></div>',
  preConfirm: () => {
    Swal.showLoading()
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 5000)
    })
  }
})

.btn {
  margin: 0 6px;
}

.custom-loader {
  animation: none !important;
  border-width: 0 !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.css">