Trivett Contracting - Millwright Services
Login
  • Call Us: 0111 222 333
  • Mail: info@domain.com
  • Home
  • About Us
  • Services
    • Millwright Services
    • Specialized Rigging & Machinery Movers
    • Turnkey Installations
    • Ball Mill Repairs
    • Metal Fabrication
    • Plant Relocation
  • Past Projects
  • Safety
  • Markets
  • Contact Us
    • Request For Quote
Go to...
  • Home
  • About Us
  • Services
    • Millwright Services
    • Specialized Rigging & Machinery Movers
    • Turnkey Installations
    • Ball Mill Repairs
    • Metal Fabrication
    • Plant Relocation
  • Past Projects
  • Safety
  • Markets
  • Contact Us
    • Request For Quote

Select the search type
  • Site
  • Web
Search
Alerts
Admin / 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 © 2006 - 2023 by Trivett Contracting, All Rights Reserved.
Terms Of Use : Privacy Statement