5.6. Item Actions

Item actions extend Bootstrap button component. They are optimized for long lists of items where each item offers one or more actions to be taken. They look the best when used only with icons.

Example

Share Remove

Used in table:

Article
Hotforwords Can Explain Lorem Ipsum far better than I can
Which to isn't lesser together years land heaven brought
<p>
    <a href="#" class="item-action" title="Edit">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </a>
    <a href="#" class="item-action item-action-danger" title="Delete">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </a>
    <a href="#" class="item-action">
        <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
        Share
    </a>
    <a href="#" class="item-action item-action-danger">
        <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
        Remove
    </a>
</p>
<p><strong>Used in table:</strong></p>
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Article</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hotforwords Can Explain Lorem Ipsum far better than I can</td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
            <tr>
                <td>Which to isn't lesser together years land heaven brought</td>
                <td class="table-cell-actions">
                    <a href="#" class="item-action" title="Edit">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="item-action item-action-danger" title="Delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>