<style>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  right: 5px;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;right:10px;} 
  to {bottom: 0; opacity: 0;right:0px;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;right:10px;}
  to {bottom: 0; opacity: 0;}
}
</style>
<div class="container mt-3 mb-3 pt-3 pb-3 bg-white">
    <div class="row">
        <div class="col-sm-12">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?php echo base_url();?>Welcome">Home</a></li>
                <li class="breadcrumb-item">Miscellaneous</li>
                <li class="breadcrumb-item">Dashboard</li>
            </ul>
            
            <div class="dashboard">
                <ol class="list-group list-group-numbered">
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold"><a href="<?php echo base_url();?>Miscellaneous/fee_heads">Miscellaneous Fee</a></div>
                            All Fee Heads
                        </div>
                        <span class="badge bg-primary rounded-pill text-white p-2">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">Fee Students</div>
                            Cras justo odio
                        </div>
                        <span class="badge bg-primary rounded-pill p-2 text-white">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <div class="fw-bold">Reports</div>
                            Cras justo odio
                        </div>
                        <span class="badge bg-primary rounded-pill p-2 text-white">14</span>
                    </li>
                </ol>
                
            </div>
        </div>
    </div>
</div>
<button onclick="myFunction()">Show Snackbar</button>

<div id="snackbar">Some text some message..</div>

<script>
function myFunction() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>