Alert

Midone

Pages

Mail Settings

Users & Permissions

Transactions Report

Users

Will Smith

willsmith@left4code.com

Al Pacino

alpacino@left4code.com

Hugh Jackman

hughjackman@left4code.com

Al Pacino

alpacino@left4code.com

Products

Sony A7 III

Photography

Samsung Galaxy S20 Ultra

Basic Alerts

Show example code

Awesome simple alert

  HTMLOpenTagdiv class="alert alert-primary show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag

Icon Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag

Additional Content Alerts

Show example code

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  HTMLOpenTagdiv class="alert alert-primary show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-gray-600 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-gray-600 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Icon & Dismiss Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Outline Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-outline-primary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-secondary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-success alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-warning alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-danger alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-dark alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Soft Color Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag

Dark Mode