Bootstrap Alert Box Classes - Bootstrap Tutorial 20

Показать описание

Notes for You:: Bootstrap Alert Box Classes - Bootstrap Tutorial 20
- 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>

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:
Bootstrap Tutorial 21 - Bootstrap Form Related Classes | Bootstrap Forms

Follow the link for previous video:
Bootstrap Tutorial 19 - Bootstrap Button Group Related Classes | Bootstrap Button Groups

=========================================

Bootstrap Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

Dreamweaver Tutorials Playlist:-

PHP Tutorials Playlist:-

MySQL Tutorials Playlist:-

=========================================

Subscribe to our YouTube channel:-

Join as member of our YouTube channel:-

Become our Patron:-

Visit our Website:-

Download our notes from Instamojo:-

Buy our products on Spring:-

=========================================

Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial