Bootstrap Skeleton

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

by DiegoTc

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="the-box">
    <div class="pull-right btn-group btn-group-sm" id="downloadSelect">
        <button type="button" class="btn btn-default">1</button> 
        <button href="#" class="onealert trigger btn btn-default">2</button> 
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="head hide">Alphabet Select</div>
    <div class="content hide">
        <div class="form-group">
            <div class="btn-group btn-group-sm">
                <button type="button" id="1Download" class="btn btn-default onealert">A</button>
                <button type="button" id="2Download" class="btn btn-default">B</button>
                <button type="button" id="3Download" class="btn btn-default">C</button>
            </div>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding: 300px;
}
.ehe-box {

}
.the-box {
    min-width:119px !important;
}

.the-box .popover-content{
    min-width:164px !important;
    padding-bottom:0px !important;
}

JavaScript

$('.trigger').popover({
    placement: 'top',
    html: true,
    title: function () {
        return $(this).parent().parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().parent().find('.content').html();
    }
});

  
    $(".onealert").on("click",function(){
        alert("You clicked on A");
    });