Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="col-sm-12" id="content">
    <div class="box custom-sections section-category">
        <div class="box-heading box-sections box-block">
            <div class="nav">
                <ul id="menu">
                    <!-- Give your href some actual meaning -->
                    <li><a href="#Section8956" class="selected">Custom Animal</a>
                    </li>
                    <li><a href="#Section8960">Custom Cars</a>
                    </li>
                    <li><a href="#Section8957">Custom Cityscape</a>
                    </li>
                    <li><a href="#Section8958">Custom Landscape</a>
                    </li>
                    <li><a href="#Section8961">Custom Sensual</a>
                    </li>
                    <li><a href="#Section8959">Custom Sports</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div id="Section8956" class="content" style="display: block;">
                <div class="product-grid isotope row">
                    <div class="product-grid-item isotope-element section-0 xs-100 sm-50 md-33 lg-25 xl-25 isotope-item">
                        <div style="background-color: rgb(255, 255, 255)" class="product-wrapper">
                            <div class="image"> <a style="border-width: 1px; border-radius: 5px; border-style: solid; border-color: rgb(255, 255, 255)" href="javascript:void(0)">
                                    <div class="p-over p-grid-over"> </div>
                                    <img src="http://metalwallart.ca/image/cache/custom art/Charcoal_zpsjdqvtaje-350x250.jpg" class="first-image" style="display: block;"> </a> 
                            </div>
                        </div>
                    </div>
                    <div class="product-grid-item isotope-element section-0 xs-100 sm-50...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.box-sections ul {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    table-layout: fixed;
}
.box-sections ul li, .custom-sections .box-heading.box-sections {
    border-right-style: dotted;
    border-color: rgb(119, 119, 119);
}
.box-sections ul li {
    list-style: none;
    border-right: 1px solid white;
    display: table-cell;
}
.box-sections ul li a {
    background: #555;
    font-weight: 400;
    font-family: "Droid Serif";
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    line-height: 38px;
}
.box-sections ul li a:hover, .box-sections ul li a.selected {
    color: rgb(255, 255, 255);
    background-color: rgb(175, 32, 112);
}
.box-sections ul li a {
    font-weight: 400;
    font-family:"Droid Serif";
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    line-height: 38px;
}
.box-sections ul li a {
    display: block;
    text-align: center;
    padding: 0 5px;
    color: white;
    font-size: inherit;
    transition: all .2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
}
a {
    color: rgb(66, 139, 202);
}
a {
    color: #333745;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
	$('#menu li > a').each(function(){
        var element = $(this);
    	if(element[0].offsetWidth < element[0].scrollWidth){
        	$(this).text(element[0].innerText.split(' ').splice(1,1));
        }
    });
});