toaster js success showing background color white

Question

toaster js for notification working properly but the background color for all the types is showing white color.

My header is like this

    <link rel="stylesheet" href="{{ asset('assets/libs/toastr/toastr.min.css') }}">

    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />

Footer is like this

    <script src="{{ asset('assets/libs/toastr/toastr.min.js') }}"></script>

Answer 1

The bootstrap contains a toaster. the bootstrap toaster and toaster js are conflicting so the all toaster background becomes white.

I just rearranged the order of the toaster and bootstrap links. the issue is solved.

    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" id="bootstrap-style" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="{{ asset('assets/libs/toastr/toastr.min.css') }}">
    <!-- Icons Css -->
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />