Bootstrap 3 | Responsive col width and height - html

Question

I'm working on a Bootstrap page for the first time. Used to working in HTML/CSS and all just not bootstrap. I'm having some difficulty with the following:
I created a fluid ( full width ) container that spans 4 columns.
The 1st column contains an image, the 2nd text, the 3rd an image and the 4th text again. The next row of columns is alternating.
I want my columns to have a responsive width and height so that if i adjust the viewport, the colums are always squared and stretching the full page. I just can't seem to get this to work. Tried various things. Setting max width, using percentages, background images, img scr tags that scale to 100% etc. but nothing seems to work.
Can anyone tell me how i can make this happen?
Greatly appreciated. No problem if JS or JQuery is needed to make it work. I got the basics covered so i know how to do that if someone points me in the right direction ( not a JS wizard to figure this one out on my own just yet ).
For example, i provided my HTML markup.
The CSS is pretty basic. Just provided the background images in the ft-img columns and some styling for the fonts. Also, currently all col have a fixed height of 400 pixels but that is abviously not the way to go. :P
<div class="container-fluid main-content">
<div class="row">
<div class="col-md-3 ft-img ft-1">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-2">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
</div>
<div class="row">
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-1">
</div>
<div class="col-md-3 ft-text">
<h1>Heading</h1>
<hr>
<p>Paragraph </p>
</div>
<div class="col-md-3 ft-img ft-2">
</div>
</div>
</div>
As asked, here's the CSS. I initially did not provide it since it's just the basics and it's just one of the things i tried. As said above.
.ft-img {
background-size: 100%;
background-position: center center;
height: 400px;
}
.ft-text {
background: url('../img/bg.png');
background-position: 10% 10%;
height: 400px;
color: #fff;
font-family: 'Lato', sans-serif;
padding: 40px;
}
.ft-text h1 {
font-size: 2.5em;
font-weight: bold;
}
.ft-text p {
font-size: 1.2em;
}
.ft-1 {
background: url('../img/ft/ft-1.jpg') no-repeat;
}
.ft-2 {
background: url('../img/ft/ft-2.jpg') no-repeat;
}

Answer 1

If you want to be fluid, you can't specify fixed units (px).
Consider using the vw unit to make your heights relative to their widths to maintain squares.
http://www.w3.org/TR/css3-values/#viewport-relative-lengths