6.alerts & progress

• alerts

<div class="alert alert-primary">
    <strong>Primary</strong> Blog post added
</div>

<div class="alert alert-secondary">
    <strong>Secondary</strong> Blog post added
</div>

<div class="alert alert-success">
    <strong>Success</strong> Blog post added
</div>

<div class="alert alert-danger">
    <strong>Danger</strong> Please check the log files
</div>

<div class="alert alert-info">
    <strong>Info</strong> You have a new message
</div>

<div class="alert alert-warning">
    <strong>Warning</strong> Please check the log files
</div>

<div class="alert alert-light">
    <strong>Light</strong> Please check the log files
</div>

<div class="alert alert-dark">
    <strong>Dark</strong> Please check the log files
</div>

• dismissable alert

<div class="alert alert-warning alert-dismissible">
    <button class="close" data-dismiss="alert" type="button">
        <span>&times;</span>
    </button>
    <strong>Dismissable</strong> Blog post added
</div>

• extra content

<div class="alert alert-success">
    <h4 class="alert-heading">Congrats!</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam
        commodi
        ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam?
        Cumque</p>
    <hr>
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
</div>

• progress bars

<div class="progress">
    <div class="progress-bar" style="width:35%;"></div>
</div>
<br>
<div class="progress">
    <div class="progress-bar" style="width:35%">35%</div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-success" style="width:55%"></div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-info" style="width:75%"></div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-warning" style="width:35%"></div>
</div>

• height

<div class="progress" style="height:1px;">
    <div class="progress-bar bg-success" style="width:75%;"></div>
</div>

• striped

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" style="width:50%;"></div>
</div>

• animated

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width:50%;"></div>
</div>

• multiple bars

<div class="progress">
    <div class="progress-bar bg-primary" style="width:25%;"></div>
    <div class="progress-bar bg-success" style="width:25%;"></div>
    <div class="progress-bar bg-warning" style="width:25%;"></div>
</div>