Making squares on bootstrap - bootstrapping

Question

this is a psd file and i want to make the squares with bootstrap
I would like to make this squares and I cant have any solutions.
i tried with this!i make a sample but i cant make it works perfect..i have some realy big issues and i am a newbie..can someone help me with at least one square??
i tried with this. I've made a sample but I can't make it works perfectly. I've some really big issues,can someone help me with at least one square?
<style type="text/css">
div[class*="col-"] > .square-responsive,
span[class*="col-"] > .square-responsive,
ol[class*="col-"] > .square-responsive,
ul[class*="col-"] > .square-responsive,
li[class*="col-"] > .square-responsive{
padding-bottom:0.5cm;
padding-left:0.5cm;
padding-right:0.3cm;
padding-top:0.4cm;
height:7.51;
width:3cm;
line-height:0.8cm;
}
div[class*="col-"] > .rect-responsive,
span[class*="col-"] > .rect-responsive,
ol[class*="col-"] > .rect-responsive,
ul[class*="col-"] > .rect-responsive,
li[class*="col-"] > .rect-responsive{
padding-bottom:0.5cm;
padding-left:0.5cm;
padding-right:0.3cm;
padding-top:0.4cm;
height:7.51cm;
width:3cm;
line-height:0.8cm;
}
.square-responsive,
.rect-responsive{
position:relative;
overflow:hidden;
background-color: #202f3f;
}
.square-responsive > *,
.rect-responsive > *{
position:absolute;
}
.square-responsive > .content,
.rect-responsive > .content {
}
</style>
<div class="row">
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
<div class="color=white">
Boat Name
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
</div>
</div>
</div>
</div>
</div>
Please give me some help.