Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="admin-panel">
    <ul class="admin-panel-list">
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-list-alt"></span>
                <span class="admin-panel-class">My Workshops</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-star"></span>
                <span class="admin-panel-class">Create Workshop</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-pencil"></span>
                <span class="admin-panel-class">Edit Workshop</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-asterisk"></span>
                <span class="admin-panel-class">Resource Allocation</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-ok"></span>
                <span class="admin-panel-class">Reservation Approval</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-calendar"></span>
                <span class="admin-panel-class">Room Calendars</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-stats"></span>
                <span class="admin-panel-class">Global Reports</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-phone"></span>
                <span class="admin-panel-class">Sing-In Tablets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-th-list"></span>
            ...

SCSS

.admin-panel {
    overflow: hidden;

    li {
        float: left;
        width: 33%;
        height: 115px;
        line-height: 1.4;
        text-align: center;
        background-color: #f9f9f9;
        border: 1px solid #fff;
    }

    li:hover, li:hover a {
        color: #fff;
        background-color: #2A7B9B;
    }

    .glyphicon {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .admin-panel-class {
        display: block;
        text-align: center;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

    li a {
        color: #333333;
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 10px;
    }

    li a:hover {
        text-decoration: none;
    }
}

.admin-panel-list {
    padding-left: 0;
    list-style: none;
    margin: auto;
}

@media (min-width:768px) {
	.admin-panel {
        li {
		    width: 25%;
		    font-size: 12px;
	    }
	}
}

@media (max-width:430px) {
	.admin-panel {
        li {
            float: none;
		    width: 100%;
		    font-size: 12px;
	    }
	}
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */