/Html/Bootstrap Alerts Additional content

Bootstrap Alerts Additional content

Bootstrap alert

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Source: getbootstrap.com

Bootstrap flash message

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Bootstrap Alerts Additional content

Alerts can also contain additional HTML elements like headings, paragraphs 
and dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <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.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Source: getbootstrap.com

Similar codes

2 votes246 views1 answer
Woocommerce order status
Html
0 vote246 views1 answer
XSLT group following siblings that follow a tag with generated ID
Html
61 votes253 views3 answers
How to use js in html
Html
3 votes259 views2 answers
Divs html
Html
13 votes260 views7 answers
Animate.css
Html
0 vote231 views1 answer
Tooltip php
Html
0 vote278 views1 answer
How to remove spaces between html elements like lebel
Html
14 votes242 views2 answers
Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0.
Html
0 vote244 views1 answer
Puppeteer html custom attribute
Html
1 vote263 views1 answer
Getproductpricehtml magento 2
Html