Bootstrap 3 Панели с изображениями

Question

Я пытаюсь воссоздать эту панель:

Мне просто интересно, если кто-нибудь знает, как я могу идти об этом, я мой HTML разметка делается. Но я понятия не имею, как я хотел бы начать стиль его ..

Мой пример HTML:

<div id="mainContainer" class="container"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Item 01</div> 
       <div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> 
      </div> 
     </div>     
    </div> 
</div> 

Answer 1

Проверьте это, это поможет вам ....

.my_panel > .panel-body { 
 
    padding: 0px; 
 
} 
 
.my_panel > .panel-body > img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.my_panel > .panel-footer { 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="mainContainer" class="container"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
 
      <div class="panel panel-default my_panel"> 
 
      <div class="panel-body"> 
 
       <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> 
 
      </div> 
 
      <div class="panel-footer"> 
 
       <h3>The company</h3> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptas, sunt vitae mollitia iure perferendis rerum odio! Natus, cupiditate, est, quas, non perspiciatis in quo possimus eos voluptas tempore maxime.</p> 
 
       <a href="#">Read More</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>