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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- Scripts -->
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        body
        {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
        .customer
        {
            background-color: #338065;
            width: 120px;
            height: 50px;
            border: 1px solid black;
            box-shadow: 10px 10px 5px #888888;
            border-radius: 10px;
            vertical-align: middle;
            text-align: center;
            margin: 20px;
        }
    </style>
    <link href="./css/bootstrap-responsive.min.css" rel="stylesheet">

    <script>
        $(document).ready(function(){
            var $modal = $('.modal').modal({
                show: false
            });
            $('#cust1').on('click', function() {
                $('#modal-header-content').empty();
                $('#modal-header-content').html('Customer 1');
                $('.modal-body').empty(); // clear the body of any old content
                var p_element = document.createElement('p');
                p_element.innerHTML = "This is text added dynamically and could be got from data of a ajax call";
                $('.modal-body').append(p_element);
                p_element = document.createElement('p');
                p_element.innerHTML = 'Dat body 0_o';
                $('.modal-body').append(p_element);
                $modal.modal('show');
            });
           ...

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');

.my-div {
    width: 128px;
    height: 54px;
    border: 1px solid #ccc;
}

JavaScript

<script>
        $(document).ready(function(){
            var $modal = $('.modal').modal({
                show: false
            });
            $('#cust1').on('click', function() {
                $('#modal-header-content').empty();
                $('#modal-header-content').html('Customer 1');
                $('.modal-body').empty(); // clear the body of any old content
                var p_element = document.createElement('p');
                p_element.innerHTML = "This is text added dynamically and could be got from data of a ajax call";
                $('.modal-body').append(p_element);
                p_element = document.createElement('p');
                p_element.innerHTML = 'Dat body 0_o';
                $('.modal-body').append(p_element);
                $modal.modal('show');
            });
            $('#cust2').on('click', function() {
                $('#modal-header-content').empty();
                $('#modal-header-content').html('Customer 2');
                $('.modal-body').empty(); // clear the body of any old content
                var p_element = document.createElement('p');
                p_element.innerHTML = "This is text added dynamically and could be got from data of a ajax call";
                $('.modal-body').append(p_element);
                p_element = document.createElement('p');
                p_element.innerHTML = 'Dat body 0_o';
                $('.modal-body').append(p_element);
                $modal.modal('show');
            });
        })
    </script>