נא להמתין...
העמוד בטעינה

Alerts

BS4 theme alerts 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

Helper

Display alert with design of BS4 theme alerts. By default the helper creates a non dismissible alert.

  • type is mandatory and can be either of: success, info, warning, danger, primary
  • options can include dismissible: true, then close button will be shown
  • options can include class: 'xxx', to style the alert (mb-0 for example)
  • options can include side_icon: 'far fa-...' to add a side icon to the alert
Dismissible alert
this is a dismissible alert with heading
Non dismissible alert
this is a dismissible alert with heading 
.row
  .col-24.col-md-12
    =bs4_alert :info, dismissible: true, class: 'm-0' do
      %h5.alert-heading Dismissible alert
      this is a dismissible alert with heading
  .col-24.col-md-12.mt-2.mt-md-0
    =bs4_alert :danger, class: 'm-0' do
      %h5.alert-heading Non dismissible alert
      this is a dismissible alert with heading

Centered dismissible alert

When text is centered in alert-dismissible the padding left/right for the close button create a "shift" effect from the center So in BS4 theme alert this is fixed

Centered dismissible alert
this alert it centered and contains heading
this alert it centered and doesn't contain heading 
.row
  .col-24.col-md-12
    =bs4_alert :success, dismissible: true, class: 'text-center m-0' do
      %h5.alert-heading Centered dismissible alert
      this alert it centered and
      %strong contains heading
  .col-24.col-md-12.mt-2.mt-md-0
    =bs4_alert :info, dismissible: true, class: 'text-center m-0' do
      this alert it centered and
      %strong doesn't contain heading

Alert with icon

There is a simple structure that lets you create beautiful alerts with icons. You can either use the following structure or transfer an icon class to the bs4_alert helper

Alert with icon
this is an alert with an icon
Alert with icon
this is an alert with an icon
Alert with icon
this is an alert with an icon
Alert with icon
this is an alert with an icon
Using the helper
This alert was created using bs4_alert helper
Text is vertically centered 
-alert_types = {success: 'fa-check-circle', info: 'fa-info-circle', warning: 'fa-exclamation-triangle', danger: 'fa-times-circle'}
.row
  -alert_types.each do |alert_type, icon_class|
    .col-24.col-md-12
      =bs4_alert alert_type, dismissible: true, class: 'alert-side-icon' do
        .alert-icon
          %i.far{class: icon_class}
        .alert-content
          %h5.alert-heading Alert with icon
          this is an alert with an icon

%hr.mt-0
.row
  .col-24.col-md-12
    =bs4_alert :primary, dismissible: true, side_icon: 'far fa-smile' do
      %h5.alert-heading Using the helper
      This alert was created using bs4_alert helper
  .col-24.col-md-12
    =bs4_alert :primary, dismissible: true, side_icon: 'far fa-arrows-v' do
      Text is vertically centered
On this page