unify colorful notifications

This bootstrap snippet called "unify colorful notifications" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: notifications,alert,messages,colorful

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container">
   <div class="row">
      <div class="col-md-6">
         <!-- Success -->
         <div class="g-brd-around g-brd-gray-light-v7 g-rounded-4 g-pa-15 g-pa-20--md g-mb-30">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black g-mb-20">Success</h3>
            <div class="noty_bar noty_type__success noty_theme__unify--v1 g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-check"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
            </div>
            <div class="noty_bar noty_type__success noty_theme__unify--v1 noty_close_with_click noty_close_with_button g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-check"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_close_button">×</div>
            </div>
            <div class="noty_bar noty_type__success noty_theme__unify--v1 noty_close_with_click noty_has_progressbar noty_has_timeout">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-check"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_progressbar" style="width: 70%;"></div>
            </div>
         </div>
         <!-- End Success -->
      </div>
      <div class="col-md-6">
         <!-- Info -->
         <div class="g-brd-around g-brd-gray-light-v7 g-rounded-4 g-pa-15 g-pa-20--md g-mb-30">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black g-mb-20">Info</h3>
            <div class="noty_bar noty_type__info noty_theme__unify--v1 g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-info"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
            </div>
            <div class="noty_bar noty_type__info noty_theme__unify--v1 noty_close_with_click noty_close_with_button g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-info"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_close_button">×</div>
            </div>
            <div class="noty_bar noty_type__info noty_theme__unify--v1 noty_close_with_click noty_has_progressbar noty_has_timeout">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-info"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_progressbar" style="width: 70%;"></div>
            </div>
         </div>
         <!-- End Info -->
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <!-- Error -->
         <div class="g-brd-around g-brd-gray-light-v7 g-rounded-4 g-pa-15 g-pa-20--md g-mb-30">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black g-mb-20">Error</h3>
            <div class="noty_bar noty_type__error noty_theme__unify--v1 g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-alert"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
            </div>
            <div class="noty_bar noty_type__error noty_theme__unify--v1 noty_close_with_click noty_close_with_button g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-alert"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_close_button">×</div>
            </div>
            <div class="noty_bar noty_type__error noty_theme__unify--v1 noty_close_with_click noty_has_progressbar noty_has_timeout">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-alert"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_progressbar" style="width: 70%;"></div>
            </div>
         </div>
         <!-- End Error -->
      </div>
      <div class="col-md-6">
         <!-- Warning -->
         <div class="g-brd-around g-brd-gray-light-v7 g-rounded-4 g-pa-15 g-pa-20--md g-mb-30">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black g-mb-20">Warning</h3>
            <div class="noty_bar noty_type__warning noty_theme__unify--v1 g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-bolt"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
            </div>
            <div class="noty_bar noty_type__warning noty_theme__unify--v1 noty_close_with_click noty_close_with_button g-mb-25">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-bolt"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_close_button">×</div>
            </div>
            <div class="noty_bar noty_type__warning noty_theme__unify--v1 noty_close_with_click noty_has_progressbar noty_has_timeout">
               <div class="noty_body">
                  <div class="g-mr-20">
                     <div class="noty_body__icon">
                        <i class="hs-admin-bolt"></i>
                     </div>
                  </div>
                  <div>Hi, welcome to Unify. This is example of Toastr notification box.</div>
               </div>
               <div class="noty_progressbar" style="width: 70%;"></div>
            </div>
         </div>
         <!-- End Warning -->
      </div>
   </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    margin-top:20px;
}

[class*="noty_theme__unify--v1"] {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 1.57143rem;
}

.noty_theme__unify--v1--dark {
  background-color: #2e3c56;
}

.noty_theme__unify--v1--light {
  background-color: #fff;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.05);
}

.noty_type__success.noty_theme__unify--v1 {
  background-color: #1cc9e4;
}

.noty_type__info.noty_theme__unify--v1 {
  background-color: #1d75e5;
}

.noty_type__error.noty_theme__unify--v1 {
  background-color: #e62154;
}

.noty_type__warning.noty_theme__unify--v1 {
  background-color: #e6a821;
}

.noty_body {
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
}

[class*="noty_theme__unify--v1"] .noty_body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.noty_theme__unify--v1--light .noty_body {
  color: #41464B;
}

.noty_body__icon {
  position: relative;
  display: inline-block;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}

.noty_body__icon::before {
  display: block;
}

.noty_body__icon > i {
  position: relative;
  top: 50%;
  display: block;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
}

.noty_theme__unify--v1 .noty_body__icon {
  background-color: rgba(245, 249, 249, 0.2);
}

.noty_theme__unify--v1--dark .noty_body__icon {
  background-color: rgba(245, 249, 249, 0.1);
}

.noty_theme__unify--v1--dark.noty_type__success .noty_body__icon {
  color: #1cc9e4;
}

.noty_theme__unify--v1--dark.noty_type__info .noty_body__icon {
  color: #1d75e5;
}

.noty_theme__unify--v1--dark.noty_type__error .noty_body__icon {
  color: #e62154;
}

.noty_theme__unify--v1--dark.noty_type__warning .noty_body__icon {
  color: #e6a821;
}

.noty_theme__unify--v1--light.noty_type__success .noty_body__icon {
  background-color: rgba(28, 201, 228, 0.15);
  color: #1cc9e4;
}

.noty_theme__unify--v1--light.noty_type__info .noty_body__icon {
  background-color: rgba(29, 117, 229, 0.15);
  color: #1d75e5;
}

.noty_theme__unify--v1--light.noty_type__error .noty_body__icon {
  background-color: rgba(230, 33, 84, 0.15);
  color: #e62154;
}

.noty_theme__unify--v1--light.noty_type__warning .noty_body__icon {
  background-color: rgba(230, 168, 33, 0.15);
  color: #e6a821;
}

[class*="noty_theme__unify--v1"] .noty_close_button {
  top: 14px;
  right: 14px;
  width: 0.85714rem;
  height: 0.85714rem;
  line-height: 0.85714rem;
  background-color: transparent;
  font-weight: 300;
  font-size: 1.71429rem;
  color: #fff;
  border-radius: 0;
}

.noty_theme__unify--v1--light .noty_close_button {
  color: #cad6d6;
}

.noty_progressbar {
  height: 0.5rem !important;
}

.noty_theme__unify--v1 .noty_progressbar {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.noty_theme__unify--v1--dark.noty_type__success .noty_progressbar {
  background-color: #1cc9e4;
}

.noty_theme__unify--v1--dark.noty_type__info .noty_progressbar {
  background-color: #1d75e5;
}

.noty_theme__unify--v1--dark.noty_type__error .noty_progressbar {
  background-color: #e62154;
}

.noty_theme__unify--v1--dark.noty_type__warning .noty_progressbar {
  background-color: #e6a821;
}

.noty_theme__unify--v1--light.noty_type__success .noty_progressbar {
  background-color: rgba(28, 201, 228, 0.15);
}

.noty_theme__unify--v1--light.noty_type__info .noty_progressbar {
  background-color: rgba(29, 117, 229, 0.15);
}

.noty_theme__unify--v1--light.noty_type__error .noty_progressbar {
  background-color: rgba(230, 33, 84, 0.15);
}

.noty_theme__unify--v1--light.noty_type__warning .noty_progressbar {
  background-color: rgba(230, 168, 33, 0.15);
}

  .g-mb-25 {
    margin-bottom: 1.78571rem !important;
  }
                                    

Similar snippets

Bootstrap snippet bs4 profile with messages and edit

bs4 profile with messages and edit

View

Bootstrap snippet Color chat

Color chat

View

Bootstrap snippet unify light notifications

unify light notifications

View

About this snippet

Creator: Dey Dey

Bootstrap version: 4.0.0

Created: Mar 20th, 13:54

Views: 1.5K

Rated 5/5 based on 5 reviews