Banner

                                       
                                         
                                          
<div class="row">
   <div class="col-lg-12">
     <div class="alert alert-warning alert-dismissible fade show custom-banner text-center" role="alert">
        <img class="custom-icon-banner" src="assets/img/WarningIcon.svg">
          This is Warning.
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
        </div>
           <div class="col-lg-12">
   <div class="alert alert-primary alert-dismissible fade show custom-banner text-center" role="alert">
      <img class="custom-icon-banner" src="assets/img/InfoIcon.svg">
          This is Some info.
      <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
   </div>
      </div>
         <div class="col-lg-12">
   <div class="alert alert-danger alert-dismissible fade show custom-banner text-center" role="alert">
      <img class="custom-icon-banner" src="assets/img/warning-white.svg">
         The apocalypse is coming and zombies are on the loose..
      <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
   </div>
    </div>
      <div class="col-lg-12">
   <div class="alert alert-success alert-dismissible fade show custom-banner text-center" role="alert">
      <img class="custom-icon-banner" src="assets/img/SuccessIcon.svg">
         This is a success message.
      <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
   </div>
     </div>
   </div>
          
              
            

                                       
                                         
                                          

   
      .alert.alert-warning.alert-dismissible.fade.show.custom-banner {
         font-size: 14px;
         font-weight: 700;
         color: #363431;
         font-size: 14px;
     }
     
     .alert-warning {
         --bs-alert-color: #664d03;
         --bs-alert-bg: #F5CA14;
         --bs-alert-border-color: #F5CA14;
         padding: 10px;
     }
     
     element.style {
     }
     .alert.alert-warning.alert-dismissible.fade.show.custom-banner {
         font-size: 14px;
         font-weight: 700;
         color: #363431;
         font-size: 14px;
     }
     .alert-warning {
         --bs-alert-color: #664d03;
         --bs-alert-bg: #F5CA14;
         --bs-alert-border-color: #F5CA14;
         padding: 10px;
     }
     .text-center {
         text-align: center!important;
     }
     .alert-warning {
         --bs-alert-color: #664d03;
         --bs-alert-bg: #fff3cd;
         --bs-alert-border-color: #ffecb5;
     }
     .alert-dismissible {
         padding-right: 3rem;
     }
     .alert {
         --bs-alert-bg: transparent;
         --bs-alert-padding-x: 1rem;
         --bs-alert-padding-y: 1rem;
         --bs-alert-margin-bottom: 1rem;
         --bs-alert-color: inherit;
         --bs-alert-border-color: transparent;
         --bs-alert-border: 1px solid var(--bs-alert-border-color);
         --bs-alert-border-radius: 0.375rem;
         position: relative;
         padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
         margin-bottom: var(--bs-alert-margin-bottom);
         color: var(--bs-alert-color);
         background-color: var(--bs-alert-bg);
         border: var(--bs-alert-border);
         border-radius: var(--bs-alert-border-radius);
     }
     .fade {
         transition: opacity .15s linear;
     }
     img.custom-icon-banner {
         width: 22px;
         height: 22px;
         margin-right: 10px;
     }
     .alert-dismissible .btn-close {
         padding: 10PX;
     }
     .alert-dismissible .btn-close {
         position: absolute;
         top: 0;
         right: 0;
         z-index: 2;
         padding: 1.25rem 1rem;
     }
     btn-close {
         width: 2em;
         height: 2em;
     }
     .btn-close {
         background-size: 25%;
     }