FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

TheBestTutorials.css Badges and Tags


Displaying Badges

The TheBestTutorials-badge class creates a circular badge.

Updates 9

News  6

Comments 8

Example

<p>Updates <span class="subhodaya-badge">9</span></p>
<p>News <span class="subhodaya-badge subhodaya-green">6</span></p>
<p>Comments <span class="subhodaya-badge subhodaya-red">8</span></p>
Try It Yourself »

Displaying Tags

The TheBestTutorials-tag class creates a tag/label.

Status Done

Example New!

Comments More Later!

Example

<p>Comments <span class="subhodaya-tag">Done</span></p>
<p>Example <span class="subhodaya-tag subhodaya-blue">New!</span></p>
<p>Comments <span class="subhodaya-tag subhodaya-teal">More Later!</span></p>
Try It Yourself »

List with Badges

  • Jill 5
  • Eve 3
  • Adam 8

Example

<ul class="subhodaya-ul subhodaya-border">
  <li>Jill <span class="subhodaya-badge subhodaya-green subhodaya-right">5</span></li>
  <li>Eve <span class="subhodaya-badge subhodaya-green subhodaya-right">3</span></li>
  <li>Adam <span class="subhodaya-badge subhodaya-green subhodaya-right">8</span></li>
</ul>
Try It Yourself »

Displaying Large Tags

66

Example

<span class="subhodaya-tag subhodaya-jumbo subhodaya-padding-large subhodaya-blue">66</span>
Try It Yourself »

Displaying Large Badges

66

Example

<p><span class="subhodaya-badge subhodaya-jumbo subhodaya-padding-large subhodaya-red">66</span></p>
Try It Yourself »

Displaying Letters as Tags

A U G U S T

Example

<span class="subhodaya-tag subhodaya-black">J</span>
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">N</span>
<span class="subhodaya-tag subhodaya-black">U</span>
<span class="subhodaya-tag subhodaya-black">A</span>
<span class="subhodaya-tag subhodaya-black">R</span>
<span class="subhodaya-tag subhodaya-black">Y</span>
Try It Yourself »