Notes:

Bootstrap - Alert box related classes:
Alert boxes are used to display important messages to the user.
Ex: Warning messages, Error messages, Information messages, etc.

alert:
- adds some padding around the content,
- adds some bottom margin
- adds little bit round corners etc.

<div class="alert">
<p>HTML is a structural language</p>
</div>

alert-heading :
- indicates the heading of the alert box, inherits the parent element color

<div class="alert">
<h3 class="alert-heading">HTML</h3>
<p>HTML is a structural language</p>
</div>

Alert box Color related classes:
alert-primary:
- sets text color to dark blue color and background color to light blue color

<div class="alert alert-primary">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-secondary:
- sets text color to dark gray color and background color to light gray color

<div class="alert alert-secondary">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-success:
- sets text color to dark green color and background color to light green color

<div class="alert alert-success">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-info:
- sets text color to dark pale blue color and background color to light pale blue color

<div class="alert alert-info">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-warning:
- sets text color to dark yellow color and background color to light yellow color

<div class="alert alert-warning">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-danger:
- sets text color to dark red color and background color to light red color

<div class="alert alert-danger">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-dark:
- sets text color to dark gray color and background color to mid gray color

<div class="alert alert-dark">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-light:
- sets text color to mid gray color and background color to light gray color

<div class="alert alert-light">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
</div>

alert-link
- displays text darker in color

<div class="alert alert-primary">
<h2 class="alert-heading">HTML</h2>
<p>HTML is a structural language</p>
<a href="#" class="alert-link">Read more</a>
</div>

Creating Dismissible Alert Box:

<div class="alert alert-primary alert-dismissible">
<p>HTML is a structural language.
<button class="close" data-dismiss="alert">x</button>
</p>
</div>

<div class="alert alert-primary alert-dismissible fade show">
<p>HTML is a structural language.
<button class="close" data-dismiss="alert">x</button>
</p>
</div>

Interview Questions: