Bootstrap 3 Skeleton

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

by someprimetime

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-2">
        <div class="panel radio-btns">
            <div class="radio">
                <label class="selected"> <span class="glyphicon glyphicon-ok" data-glyph="glyphicon-cloud"></span>

                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked tabindex="1">Option one</label>
            </div>
            <div class="radio">
                <label> <span class="glyphicon glyphicon-cloud" data-glyph="glyphicon-cloud"></span>

                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Option one</label>
            </div>
            <div class="radio">
                <label> <span class="glyphicon glyphicon-cloud" data-glyph="glyphicon-cloud"></span>

                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Option one</label>
            </div>
        </div>
    </div>
</div>

SCSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .selected {
     color: green;
    
    .glyphicon:before {
        color: green;
    }
}

label {
    &:hover {
        color: green;
        }
}
}

input[type="radio"] {
    display: none;
}

JavaScript

(function ($) {
    var radioButtons = {
        init: function () {
            this.each(function () {
                var $container = $(this);
                var $radios = $container.find(':radio');
                var $labels = $container.find('label');
                var $spans = $container.find('.glyphicon');

                $radios.on('change', $container, function (evt) {
                    var $radio = $(this);
                    var $label = $radio.closest('label');
                    var $span = $radio.prev('span');

                    radioButtons.removeSelectedClasses($labels);

                    radioButtons.addSelectedClass($label);
                    
                    radioButtons.toggleCheckedGlyph($spans, $span);
                });
            });
        },

        removeSelectedClasses: function ($labels) {
            $labels.removeClass('selected');
        },

        addSelectedClass: function ($label) {
            $label.addClass('selected');
        },
        
        toggleCheckedGlyph : function($spans, $span) {
            $spans.each(function() {
                var glyphName = $(this).data('glyph');
                $(this).removeClass('glyphicon-ok').addClass(glyphName);
            });
            $span.addClass('glyphicon glyphicon-ok');
        }
    }
    $.fn.radioButtons = radioButtons.init
})(jQuery);

$(function () {
    $('.radio-btns').radioButtons();
});