Please wait...
Page is loading

Toasts

BS4 theme toasts is an enhancement of BS Alerts .

Getting started

To use BS4 alerts simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Styles

BS4 theme toasts includes several predefined custom styles, each serving its own semantic purpose. To use a custom style add toast-success, toast-danger, toast-dark, toast-info etc.. 

.row
  .col-24.col-md-8
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'
  .col-24.col-md-8.mt-3.mt-md-0
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, class: "toast-dark", data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'

  .col-24.col-md-8.mt-3.mt-md-0
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, class: "toast-danger", data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'
.row.mt-3
  .col-24.col-md-8
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, class: "toast-info", data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'
  .col-24.col-md-8.mt-3.mt-md-0
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, class: "toast-primary", data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'

  .col-24.col-md-8.mt-3.mt-md-0
    .toast{role: 'alert', aria: {live: "assertive", atomic: "true"}, class: "toast-success", data: {autohide: 'false'}}
      .toast-header
        %i.far.fa-info-circle.mr-2
        ='הודעה'
        =button_tag class: 'close ml-auto', 'data-dismiss': 'toast', type: 'button' do
          %span ×
      .toast-body
        %strong='adsfsd'

:javascript
  $(()=>{
    $('.toast').toast('show');
  })
On this page