I. Collections

Basic

Item 1
Item 2
Item 3
Item 4


<ul class="collection">
        <li class="collection-item">Item 1</li>
        <li class="collection-item">Item 2</li>
        <li class="collection-item">Item 3</li>
        <li class="collection-item">Item 4</li>
    </ul>

Links

Item 1 Item 2 Item 3 Item 4


<div class="collection">
        <a href="#!" class="collection-item">Item 1</a>
        <a href="#!" class="collection-item active">Item 2</a>
        <a href="#!" class="collection-item">Item 3</a>
        <a href="#!" class="collection-item">Item 4</a>
    </div>

Header

Heading
Item 1
Item 2
Item 3
Item 4


<ul class="collection with-header">
        <li class="collection-header">
            <h4>Heading</h4></li>
        <li class="collection-item">Item 1</li>
        <li class="collection-item">Item 2</li>
        <li class="collection-item">Item 3</li>
        <li class="collection-item">Item 4</li>
    </ul>

Colored header

Heading

Item 2 Item 3 Item 4 Item 5 Item 6 Item 7


		<div class="collection z-depth-2">
            <a class="collection-item blue"><h4 class="white-text">Item 1</h4></a>
            <a href="#!" class="collection-item">Item 2</a>
            <a href="#!" class="collection-item">Item 3</a>
            <a href="#!" class="collection-item active">Item 4</a>
            <a href="#!" class="collection-item">Item 5</a>
            <a href="#!" class="collection-item">Item 6</a>
            <a href="#!" class="collection-item">Item 7</a>
        </div>

Secondary content

Heading
Item 1
Item 2
Item 3
Item 4


<ul class="collection with-header">
        <li class="collection-header">
            <h4>Heading</h4></li>
        <li class="collection-item">
            <div>Item 1<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
        </li>
        <li class="collection-item">
            <div>Item 2<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
        </li>
        <li class="collection-item">
            <div>Item 3<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
        </li>
        <li class="collection-item">
            <div>Item 4<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
        </li>
    </ul>

Avatar Content

Title
First Line
Second Line
Title
First Line
Second Line
Title
First Line
Second Line
Title
First Line
Second Line


<ul class="collection">
        <li class="collection-item avatar">
            <img src="<?php bloginfo('template_directory'); ?>/img/avatar.jpeg" alt="" class="circle">
            <span class="title">Title</span>
            <p>First Line
                <br> Second Line
            </p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
        <li class="collection-item avatar">
            <i class="material-icons circle">folder</i>
            <span class="title">Title</span>
            <p>First Line
                <br> Second Line
            </p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
        <li class="collection-item avatar">
            <i class="material-icons circle green">insert_chart</i>
            <span class="title">Title</span>
            <p>First Line
                <br> Second Line
            </p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
        <li class="collection-item avatar">
            <i class="material-icons circle red">play_arrow</i>
            <span class="title">Title</span>
            <p>First Line
                <br> Second Line
            </p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
    </ul>

II. Classic Bootstrap Tables

Contextual Classes

Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com


    <table class="table">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr class="danger">
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr class="info">
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>

Basic Table

The .table class adds basic styling (light padding and only horizontal dividers) to a table:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

        
  <table class="table">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
     </table>

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

          
  <table class="table table-striped">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>

Bordered Table

The .table-bordered class adds borders to a table:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com


     <table class="table table-bordered">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>

Hover Rows

The .table-hover class enables a hover state on table rows:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com


    <table class="table table-hover">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com


    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>