Bootstrap Skeleton

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

by agib

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <span class="label">Påmind om udløb</span>
            <div class="popover-markup"> <a href="#" class="trigger">+ Tilføj påmindelse</a> 
                <div class="head hide">Påmindelse om udløb</div>
                <div class="content hide">
                    <div class="form-group">
                        <p>Send e-mail til</p>
                        <p>
                            <select name="" id="" class="form-control">
                                <option value="">XForm-admin-bruger1</option>
                                <option value="">XForm-admin-bruger2</option>
                                <option value="">XForm-admin-bruger3</option>
                                <option value="">XForm-admin-bruger4</option>
                                <option value="">XForm-admin-bruger5</option>
                                <option value="">XForm-admin-bruger6</option>
                                <option value="">XForm-admin-bruger7</option>
                                <option value="">XForm-admin-bruger8</option>
                                <option value="">XForm-admin-bruger9</option>
                                <option value="">XForm-admin-bruger10</option>
                            </select>
                        </p>
                        <p>
                            <input type="number" class="form-control" placeholder="21" value="21">
                            <p>dage før udløb, dvs. den DD-MM-ÅÅÅÅ</p>
                        </p>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">OK</button>
                </div>
                <div class="footer hide">test</div>
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
  ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding: 100px 10px;
    background-color: #F3F3F3;
}
.row {
    margin-left: 100px;
    margin-bottom: 400px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: 8px 0;
}
.popover-markup {
    display: inline-block;
}
textarea.form-control {
    width: 200px;
    height: 200px;
}
span.label {
    font-size: 12px;
    color: #777;
    display: block;
    padding-left: 0;
    text-align: left;
}

JavaScript

$('.popover-markup>.trigger').popover({
    html: true,
    placement: "bottom",
    title: function () {
        return $(this).parent().find('.head').html() +
            '<button type="button" id="close" class="close" onclick="">&times;</button>';
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

$('.btn').click(function(){
   
});