566 lines
38 KiB
Plaintext
566 lines
38 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
- var height_equal = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Alert
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Base
|
|
li.breadcrumb-item.active Alert
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Theme Color Alerts
|
|
span
|
|
| Theme color Archive just adding class
|
|
code .dark
|
|
.card-body
|
|
.alert.alert-primary.dark(role='alert')
|
|
p This is a info alert—check it out!
|
|
.alert.alert-secondary.dark(role='alert')
|
|
p This is a light alert—check it out!
|
|
.alert.alert-success.dark(role='alert')
|
|
p This is a success alert—check it out!
|
|
.alert.alert-info.dark(role='alert')
|
|
p This is a info alert—check it out!
|
|
.alert.alert-warning.dark(role='alert')
|
|
p This is a warning alert—check it out!
|
|
.alert.alert-danger.dark(role='alert')
|
|
p This is a danger alert—check it out!
|
|
.alert.alert-light.dark(role='alert')
|
|
p This is a light alert—check it out!
|
|
.alert.alert-dark.dark(role='alert')
|
|
p This is a dark alert—check it out!
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Link color in theme-color
|
|
span
|
|
| Use the
|
|
code .alert-link
|
|
| utility class to quickly provide matching colored links within any alert
|
|
.card-body
|
|
.alert.alert-primary.dark(role='alert')
|
|
p
|
|
| This is a primary alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-secondary.dark(role='alert')
|
|
p
|
|
| This is a secondary alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-success.dark(role='alert')
|
|
p
|
|
| This is a success alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-info.dark(role='alert')
|
|
p
|
|
| This is a info alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-warning.dark(role='alert')
|
|
p
|
|
| This is a warning alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-danger.dark(role='alert')
|
|
p
|
|
| This is a danger alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-light.dark(role='alert')
|
|
p
|
|
| This is a light alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-dark.dark(role='alert')
|
|
p
|
|
| This is a light alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Dismissing
|
|
span
|
|
| To animate alerts when dismissing them, be sure to add the .fade and .show classes.
|
|
.card-body
|
|
.alert.alert-primary.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-success.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-info.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-warning.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-danger.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-light.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-dark.dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Alert With Icon
|
|
span Just add Any icon before text
|
|
.card-body
|
|
.alert.alert-primary.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='clock')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='heart')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-success.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='thumbs-up')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-info.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='help-circle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-warning.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='bell')
|
|
p can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-danger.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='thumbs-down')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-light.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='alert-triangle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-dark.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='alert-circle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Light Alerts
|
|
span
|
|
| Alerts are available for any length of text, as well as an optional dismiss button.
|
|
.card-body
|
|
.alert.alert-primary(role='alert')
|
|
p This is a primary alert—check it out!
|
|
.alert.alert-secondary(role='alert')
|
|
p This is a secondary alert—check it out!
|
|
.alert.alert-success(role='alert')
|
|
p This is a success alert—check it out!
|
|
.alert.alert-info(role='alert')
|
|
p This is a info alert—check it out!
|
|
.alert.alert-warning(role='alert')
|
|
p This is a warning alert—check it out!
|
|
.alert.alert-danger(role='alert')
|
|
p This is a danger alert—check it out!
|
|
.alert.alert-light(role='alert')
|
|
p This is a light alert—check it out!
|
|
.alert.alert-dark(role='alert')
|
|
p This is a light alert—check it out!
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Link color
|
|
span
|
|
| Use the
|
|
code .alert-link
|
|
| utility class to quickly provide matching colored links within any alert
|
|
.card-body
|
|
.alert.alert-primary(role='alert')
|
|
p
|
|
| This is a primary alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-secondary(role='alert')
|
|
p
|
|
| This is a secondary alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-success(role='alert')
|
|
p
|
|
| This is a success alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-info(role='alert')
|
|
p
|
|
| This is a info alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-warning(role='alert')
|
|
p
|
|
| This is a warning alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-danger(role='alert')
|
|
p
|
|
| This is a danger alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-light(role='alert')
|
|
p
|
|
| This is a light alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.alert.alert-dark(role='alert')
|
|
p
|
|
| This is a light alert with
|
|
a.alert-link(href='#') an example link
|
|
| .Click It
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Dismissing
|
|
span
|
|
| To animate alerts when dismissing them, be sure to add the .fade and .show classes.
|
|
.card-body
|
|
.alert.alert-primary.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-secondary.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-success.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-info.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-warning.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-danger.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-light.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-dark.alert-dismissible.fade.show(role='alert')
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Outline Alerts
|
|
span
|
|
| Outline Archive just adding class
|
|
code .outline
|
|
.card-body
|
|
.alert.alert-primary.outline(role='alert')
|
|
p This is a primary alert—check it out!
|
|
.alert.alert-secondary.outline(role='alert')
|
|
p This is a secondary alert—check it out!
|
|
.alert.alert-success.outline(role='alert')
|
|
p This is a success alert—check it out!
|
|
.alert.alert-info.outline(role='alert')
|
|
p This is a info alert—check it out!
|
|
.alert.alert-warning.outline(role='alert')
|
|
p This is a warning alert—check it out!
|
|
.alert.alert-danger.outline(role='alert')
|
|
p This is a danger alert—check it out!
|
|
.alert.alert-light.outline(role='alert')
|
|
p This is a light alert—check it out!
|
|
.alert.alert-dark.outline(role='alert')
|
|
p This is a light alert—check it out!
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Outline Dark Alerts
|
|
span
|
|
| Outline Archive just adding class
|
|
code .outline-2x
|
|
.card-body
|
|
.alert.alert-primary.outline-2x(role='alert')
|
|
p This is a primary alert—check it out!
|
|
.alert.alert-secondary.outline-2x(role='alert')
|
|
p This is a secondary alert—check it out!
|
|
.alert.alert-success.outline-2x(role='alert')
|
|
p This is a success alert—check it out!
|
|
.alert.alert-info.outline-2x(role='alert')
|
|
p This is a info alert—check it out!
|
|
.alert.alert-warning.outline-2x(role='alert')
|
|
p This is a warning alert—check it out!
|
|
.alert.alert-danger.outline-2x(role='alert')
|
|
p This is a danger alert—check it out!
|
|
.alert.alert-light.outline-2x(role='alert')
|
|
p This is a light alert—check it out!
|
|
.alert.alert-dark.outline-2x(role='alert')
|
|
p This is a light alert—check it out!
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Alert With Icon outline
|
|
span Just add Any icon before text
|
|
.card-body
|
|
.alert.alert-primary.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='clock')
|
|
p
|
|
| Your time Over after
|
|
b 5
|
|
| miniute
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-secondary.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='heart')
|
|
p Oh snap! Change a few things up and submit again.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-success.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='thumbs-up')
|
|
p
|
|
b Well done!
|
|
| You successfully read this important alert message.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-info.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='help-circle')
|
|
p
|
|
b welcome!
|
|
| Start your day with some alerts.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-warning.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='bell')
|
|
p
|
|
b Congratulation!
|
|
| Your Product Added in Like List
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-danger.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='thumbs-down')
|
|
p
|
|
| Your
|
|
b Perfomance
|
|
| is down on this week
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-light.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='alert-triangle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-dark.outline.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='alert-circle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Alert With Icon inverse
|
|
span
|
|
| Use the
|
|
code .inverse
|
|
| class to quickly provide matching colored links within any alert
|
|
.card-body
|
|
.alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-timer
|
|
p
|
|
| Your time Over after
|
|
b 5
|
|
| miniute
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-secondary.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-heart
|
|
p Oh snap! Change a few things up and submit again.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-success.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-thumb-up.alert-center
|
|
p
|
|
b Well done!
|
|
| You successfully read this important alert message.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-info.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-help-alt
|
|
p
|
|
b welcome!
|
|
| Start your day with some alerts.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-warning.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-bell
|
|
p
|
|
b Congratulation!
|
|
| Your Product Added in Like List
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-danger.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-thumb-down
|
|
p
|
|
| Your
|
|
b Perfomance
|
|
| is down on this week
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-light.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-alert.txt-dark
|
|
p You can check in on some of those fields below.
|
|
button.btn-close.txt-light(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.alert-dark.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-info-alt
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Text as action
|
|
span
|
|
| Use the
|
|
code .action-text
|
|
| class to add dismiss text instead of icon
|
|
.card-body.dismiss-text
|
|
.alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-timer
|
|
p
|
|
| Your time Over after
|
|
b 5
|
|
| miniute
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-primary(aria-hidden='true') dismiss
|
|
.alert.alert-secondary.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-heart
|
|
p Oh snap! Change a few things up and submit again.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-secondary(aria-hidden='true') dismiss
|
|
.alert.alert-success.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-thumb-up.alert-center
|
|
p
|
|
b Well done!
|
|
| You successfully read this important alert message.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-success(aria-hidden='true') dismiss
|
|
.alert.alert-info.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-help-alt
|
|
p
|
|
b welcome!
|
|
| Start your day with some alerts.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-info(aria-hidden='true') dismiss
|
|
.alert.alert-warning.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-bell
|
|
p
|
|
b Congratulation!
|
|
| Your Product Added in Like List
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-warning(aria-hidden='true') dismiss
|
|
.alert.alert-danger.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-thumb-down
|
|
p
|
|
| Your
|
|
b Perfomance
|
|
| is down on this week
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-danger(aria-hidden='true') dismiss
|
|
.alert.alert-light.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-alert.txt-dark
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-light.txt-dark(aria-hidden='true') dismiss
|
|
.alert.alert-dark.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icon-info-alt
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
span.bg-light.txt-dark(aria-hidden='true') dismiss
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Additional content
|
|
span
|
|
| Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
|
.card-body
|
|
.alert.alert-primary(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-secondary(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-success(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-danger(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-info(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-light(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-dark(role='alert')
|
|
h4.alert-heading Well done!
|
|
p
|
|
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|