definicao de layout
This commit is contained in:
565
public/assets/pug/pages/template/alert.pug
Normal file
565
public/assets/pug/pages/template/alert.pug
Normal file
@@ -0,0 +1,565 @@
|
||||
- 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
|
||||
Reference in New Issue
Block a user