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.bundleHelper
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 headingNon 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 headingCentered 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 headingthis 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 headingAlert 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_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