HTML Form Elements here add styles to Typography, label, Badge and alert
Typography:Web typography” refers to the appearance of all the text on your website.It includes basic CSS text properties like what font to use .
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>.Tag Header Line.
Label:the <label> tag is used to create labels for items in a user interface.
The <label> element is used to associate a text label with a form <input> field.
The <label> tag defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Badge:
Badges are numerical indicators. Badges are mainly used to highlight new or unread items. Badges can also be used inside other elements.
Alert:
The alert() method displays an alert box with a specified message and an OK button.
Typography
<h1> H1 Tag Header Line </h1> <h2> H2 Tag Header Line </h2> <h3> H3 Tag Header Line </h3> <h4> H4 Tag Header Line </h4> <h5> H5 Tag Header Line </h5> <h6> H6 Tag Header Line </h6>
Label
<label class="default-bg"> Defaul Label </label> <label class="success-bg"> Defaul Label </label> <label class="warning-bg"> Defaul Label </label> <label class="danger-bg"> Defaul Label </label>
Badge
<label class="default-bg"> 1 </label> <label class="success-bg"> 999 </label> <label class="warning-bg"> Lorem Ipsum </label> <label class="danger-bg"> Lorem Ipsum </label>
Alert
<div class="alert"> <a href="#"><img src="icons/cancell.svg" height="14" class="close"/></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="alert primary"> <a href="#"><img src="icons/cancell.svg" height="14" class="close"/></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="alert success"> <a href="#"><img src="icons/cancell.svg" height="14" class="close"/></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="alert warning"> <a href="#"><img src="icons/cancell.svg" height="14" class="close"/></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="alert danger"> <a href="#"><img src="icons/cancell.svg" height="14" class="close"/></a> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>