• Call Us: 0111 222 333
  • Mail: info@domain.com
Professional DNN Responsive Theme
Professional DNN Responsive Theme
Go to...
  • Home
    • BoxedVersion
      • BoxedInner Page
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink Container
  • Contact Us
  • Home
    • BoxedVersion
      • BoxedInner Page
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink Container
  • Contact Us
Select the search type
  • Site
  • Web
Search

Alerts

Features / Bootstrap Componentes / Alerts

Alerts Styles for success, warning, and error messages

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Warning! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

Success

Well done! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

Information

Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>
Copyright 2025 by Professional : Terms Of Use : Privacy Statement
  • Register
Login