Bootstrap classes are used to make beautiful and styled alert for web pages. And this is most easy way to make an alert.
Example of different alerts
In this example differt alert class are used.
And each class has it own properties like their different
background colors.
<divclass="alert alert-success"><b>Success !</b>This alert box for success message.</div><divclass="alert alert-info"><b>Info !</b>This alert box is for info message.</div><divclass="alert alert-warning"><b>Warning !</b>This alert box for warning message.</div><divclass="alert alert-danger"><b>Danger !</b>This alert box for danger message.</div><divclass="alert alert-primary"><b>Primary !</b>This alert box is used for important message.</div><divclass="alert alert-secondary"><b>Secondary !</b>This alert box is used for less important message.</div><divclass="alert alert-dark"><b>Dark !</b>This alert is for dark alert.</div><divclass="alert alert-light"><b>Light !</b>This alert is for light grey alert.</div>
Output of above code
Success ! This alert box for success message.
Info ! This alert box is for info message.
Warning ! This alert box for warning message.
Danger ! This alert box for danger message.
Primary ! This alert box is used for important message.
Secondary ! This alert box is used for less important message.
Dark ! This alert is for dark alert.
Light ! This alert is for light grey alert.
Alert with close property
In this example alert-dismissible bootstrap class is used to make
an alert dynamic. It will hide the box at click on the close button.
<divclass="alert alert-success alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Success !</b>This alert box for success message.</div><divclass="alert alert-info alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Info !</b>This alert box is for info message.</div><divclass="alert alert-warning alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Warning !</b>This alert box for warning message.</div><divclass="alert alert-danger alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Danger !</b>This alert box for danger message.</div><divclass="alert alert-primary alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Primary !</b>This alert box is used for important message.</div><divclass="alert alert-secondary alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Secondary !</b>This alert box is used for less important message.</div><divclass="alert alert-dark alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Dark !</b>This alert is for dark alert.</div><divclass="alert alert-light alert-dismissible"><buttontype="button"class="close"data-dismiss="alert">×</button><b>Light !</b>This alert is for light grey alert.</div>
Output of above code
Success ! This alert box for success message.
Info ! This alert box is for info message.
Warning ! This alert box for warning message.
Danger ! This alert box for danger message.
Primary ! This alert box is used for important message.
Secondary ! This alert box is used for less important message.
Dark ! This alert is for dark alert.
Light ! This alert is for light grey alert.
Alert links example
In this example alert-link bootstrap class is
used to make a link as an alert.
<divclass="alert alert-success"><b>Success !</b>Visit this<ahref="#"class="alert-link">success message</a></div><divclass="alert alert-info"><b>Info !</b>Visit this<ahref="#"class="alert-link">info message</a></div><divclass="alert alert-warning"><b>Warning !</b>Visit this<ahref="#"class="alert-link">warning message</a></div>
Success ! Visit this success message
Info ! Visit this info message.
Warning ! Visit this warning message.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
