在bootstrap

Question

this is a psd file and i want to make the squares with bootstrap

我想制作这个方块而我无法解决问题。 我尝试了这个！我做了一个样品，但我不能让它完美。我有一些真正的大问题，我是一个新手..有人帮我至少一个广场？ 我试过this。我做了一个样品，但我不能让它完美无缺。我有一些非常重要的问题，有人可以帮我至少一个方格吗？

<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>

请给我一些帮助。