Bootstrap 3 Skeleton

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

by matox

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://matox.si/js/jquery.knob.js"></script>
<div class="container">
    <div class="row features">
        <div class="col-sm-3 col-sm-offset-1 req-preview">
            <h6 class="trip-title">New York</h6>
            <div class="trip-thumb">
                <img src="http://lorempixel.com/200/100" width="100%" height="100%" />
            </div>
            <div class="trip-content">
                <div class="trip-stats row">
                    <div class="stats-left col-md-5">
                        <div class="stats-funded">
                            <span>724€</span>
                            <span class="stats-description">backed</span>
                        </div>
                        <div class="stats-backers">
                            <span>53</span>
                            <span class="stats-description">backers</span>
                        </div>
                    </div>
                    <div class="stats-right col-sm-offset-2 col-md-7">
                        <div class="stats-cpb">
                            <input type="text" class="stats-proc readOnly" data-min="0" data-max="100">
                        </div>
                    </div>
                </div>
                <button class="btn btn-sm btn-default trip-kick-btn">Kick it</button>
            </div>
        </div>
        <div class="col-sm-3 col-sm-offset-1 req-preview">
            <h6 class="trip-title">New York</h6>
            <div class="trip-thumb">
                <img src="http://lorempixel.com/200/100" width="100%" height="100%" />
            </div>
            <div class="trip-content">
                <div class="trip-stats row">
                    <div class="stats-left col-md-5">
                        <div class="stats-funded">
                            <span>724€</span>
                            <span...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    background: #6DB0B6;
}
.req-preview {
    background: #ffffff;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.req-preview h6 {
    font-weight: bold;
    text-align: center;
    font-size: 1.7em;
}
.req-preview .trip-content {
    padding: 15px;
    font-weight: 1em;
}
.req-preview .trip-content .stats-left {
     float: left;   
}

.req-preview .trip-content .stats-funded, .req-preview .trip-content .stats-backers {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

.req-preview .trip-content .stats-description {
    display: block; 
    font-size: 0.5em;
    font-weight: 100;
    text-align: center;
    margin-bottom: 10px;
}

.req-preview .trip-content .trip-kick-btn {
    background: #23C04B;
     color: #ffffff;
     width: 100%;
}

JavaScript

$(function () {
    $(".stats-proc").knob({
        'readOnly': 'true',
            'width': '75%',
            'dynamicDraw': true,
            'thickness': 0.2,
            'fgColor': '#F2CD24',
            'tickColorizeValues': true,
            'skin': 'tron',
            'fontWeight': 'bold',
            'format': function (value) {
            return value + '%';
        },
    });
    $(".stats-proc").val(Math.floor(Math.random() * 100) + '%').trigger('change');
});