Bootstrap- resize heigh of element according the width

I use bootstrap to create responsive layout. Here is the jsF

I have few issues:

  1. I try to use a script which apparently doesn't work.
  2. In case I add the following static style I can see the squares but there are too much spaces between some of them , and page is not responsive:
.black{background-color:black; float:left; width:100%;}
.black.double{height: 490px;}


You can use just css to achieve the desired result, no js necessary,

.black {
  padding-top: 56%;
  width: 100%;
  position: relative;

.black > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

this works because in css margin and padding percentages are set relative to the width of an element rather than the height. so when you say the padding-top is 56%, that means 56 percent of the width of the element.

Need Your Help

Issue on Deploying Node.js & Socket.IO App to Nodejitsu

node.js nodejitsu

I am new at Node.js, Socket.IO, and Nodejitsu. I am also running Ubuntu on my machine. After Googling for free hoisting supports for Node.js and Socket.IO, I find the Nodejitsu hosting platform. Th...

What's the difference between nohup and ampersand

linux bash nohup

Both nohup myprocess.out & or myprocess.out & set myprocess.out to run in the background. After I shutdown the terminal, the process is still running.