Html Form Elements

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>