Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="form-group clearfix" id="editField">
    <div class="col-md-3">
        <button class="btn blue btn-xs" type="button" data-labelcap="Ladduser">Contact Name</button>
    </div>
    <div class="col-md-3">
        <label class="control-label" data-labelcap="Lresponsibility">Responsibility</label>
    </div>
    <div class="col-md-6">
        <label class="control-label" data-labelcap="Lphone">Preferred Phone</label>
    </div>
    <div class="col-md-3">
        <input type="text" class="form-control" id="adduser" maxlength="30" data-pid4="adduser" />
    </div>
    <div class="col-md-3">
        <select class="form-control" data-placeholder="" id="responsibility" data-pid4="responsibility"></select>
    </div>
    <div class="col-md-3">
        <select class="form-control" data-placeholder="" id="phone" data-pid4="phone"></select>
    </div>
    <div class="col-md-3">
        <input type="checkbox" id="defcont" maxlength="1" data-pid4="defcont" />
        <label class="control-label" data-labelcap="Ldefcont">Default</label>
    </div>
    <!--<div class="col-md-1 text-right">
                                                            <button class="btn blue" type="button"><i class="fa fa-plus"></i></button>
                                                        </div>--></div>
<!-- /.form-group -->
<div class="form-group clearfix">
    <div class="col-md-12 padT">
        <table class="table table-bordered" id="contacts">
            <tr>
                <th>Contact</th>
                <th>Responsibility</th>
                <th>Preferred Phone</th>
                <th>Email</th>
                <th>Company</th>
            </tr>
            <tr>
                <td>Jim</td>
                <td>Manager</td>
                <td>999-999-9999</td>
               ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
.selected {
    background-color: #ccc
}

JavaScript

$('.table').on('click', 'tr', function (e) {

    var $this = $(this);

    if ($this.hasClass('selected')) {
        $this.removeClass('selected');
    } else {
        $('tr.selected').removeClass('selected');
        $this.addClass('selected');

        var user = $this.find('td').eq(0).text(),
            responsibility = $this.find('td').eq(1).text(),
            phone = $this.find('td').eq(2).text();

        // fill input values
        $('#adduser').val(user);
        $('#responsibility').append($("<option></option>")
            .attr("value", responsibility).text(responsibility));
        $('#phone').append($("<option></option>")
            .attr("value", phone).text(phone));

    }

});