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

TheBestTutorials.css Lists


Displaying a List

  • × Mike
    Web Designer
  • × Jill
    Support
  • × Jane
    Accountant

Basic List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Bordered List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

List Header

  • Names

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

List as a Card

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Centered List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Colored List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Colored List Item

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul">
  <li class="subhodaya-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Hoverable list

The subhodaya-hoverable class adds a grey background color to each list item on mouse-over:

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

If you want a specific hover color, add any of the subhodaya-hover-classes to each <li> element:

  • Jill
  • Eve
  • Adam

Example

<li class="subhodaya-hover-red">Jill</li>
Try It Yourself »

Closable list

Click on the letter "x" to close/hide a list item:

  • Jill x
  • Adam x
  • Eve x

Example

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="subhodaya-closebtn subhodaya-margin-right subhodaya-medium">x</span>
</li>
Try It Yourself »

Padded List

  • Jill
  • Eve
  • Adam
  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul">
  <li class="subhodaya-padding-16">Jill</li>
  <li class="subhodaya-padding-16">Eve</li>
  <li class="subhodaya-padding-16">Adam</li>
</ul>
Try It Yourself »

Avatar List

  • x Mike
    Web Designer
  • x Jill
    Support
  • x Jane
    Accountant

Example

<ul class="subhodaya-ul subhodaya-card-4">
  <li class="subhodaya-padding-16">
    <span onclick="this.parentElement.style.display='none'"
    class="subhodaya-closebtn subhodaya-padding">x</span>
    <img src="img_avatar2.png" class="subhodaya-left subhodaya-circle" style="width:60px">
    <span class="subhodaya-xlarge">Mike</span><br>
    <span>Web Designer</span>
  </li>
</ul>
Try It Yourself »

Tiny List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Small List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Large List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

XLarge List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

XXLarge List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

XXXLarge List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Jumbo List

  • Jill
  • Eve
  • Adam

Example

<ul class="subhodaya-ul subhodaya-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »