We can begin from the project we did in Chapter 1, Refreshing the UI Automatically with KnockoutJS. First of all, we are going to add some style to the page. Add a file called style.css into the css folder. Add a reference in the index.html file, just below the bootstrap reference. The following is the content of the file:
.container-fluid {
margin-top: 20px;
}
.row {
margin-bottom: 20px;
}
.cart-unit {
width: 80px;
}
.btn-xs {
font-size:8px;
}
.list-group-item {
overflow: hidden;
}
.list-group-item h4 {
float:left;
width: 100px;
}
.list-group-item .input-group-addon {
padding: 0;
}
.btn-group-vertical > .btn-default {
border-color: transparent;
}
.form-control[disabled], .form-control[readonly] {
background-color: transparent !important;
}Now remove all the content from the body tag except for the script tags and paste in these lines:
<div class="container-fluid">
<div class="row" id="catalogContainer">
<div class="col-xs-12...