Bootstrap 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="popover-markup"> <a href="#" class="trigger">Popover link</a> 
    <div class="head hide">Lorem Ipsum</div>
    <div class="content hide">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Type something…">
        </div>
        <button type="submit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>
<div class="popover-markup"> <a href="#" class="trigger">Popover link II</a> 
    <div class="head hide">Lorem Ipsum II</div>
    <div class="content hide">
    <div class="form-group">
       <input type="text" class="form-control" placeholder="Type something II…">
        </div>
        <button type="submit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    margin: 100px 10px;
}

JavaScript

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