Как сделать карты на изображение

Question

мне нужно сделать карту, на изображении здесь так же, как это:

Вот мой код:

HTML

<section> 
    <div class="download-section"> 
    <div class="container"> 

  <div id="raise" class="btn-group btn-group-lg" role="group"> 
      <button type="button" class="btn btn-primary">View Details</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

CSS

.download-section { 

     width: 100%; 
     color: #fff; 
     background: url(../img/projects.jpg) center center no-repeat #000; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     -o-background-size: cover; 
    } 

Я пытаюсь сделать карту, но я не вижу границы таблицы. Я использую Bootstrap-3. Может кто-нибудь мне помочь? как я могу это исправить.

Answer 1

подход, что я думаю, что вы хотите ... Что-то вроде этого:

У нас есть контейнера с рядом внутри него, который имеет 3 COLS. Общая сумма должна быть 12, поэтому мы добавим 3 col-md-4.

HTML

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <div class="panel mycard"> 
      <div class="panel-body"> 
      <p>Here goes some beautiful text</p> 
      <button type="button" class="btn btn-primary">View Details</button> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="panel mycard"> 
      <div class="panel-body"> 
      <p>Here goes some beautiful text</p> 
      <button type="button" class="btn btn-primary">View Details</button> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="panel mycard"> 
      <div class="panel-body"> 
      <p>Here goes some beautiful text</p> 
      <button type="button" class="btn btn-primary">View Details</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

CSS

.mycard { 
    border: 1px solid #ccc; 
    text-align: center; 
}