Bootstrap 3 Panneaux avec des images

Je suis en train de re-créer ce panneau:

Bootstrap 3 Panneaux avec des images

Je me demandais si quelqu'un sait comment je peux aller sur ce , j'ai mon balisage html fait. Mais je n'ai aucune idée de comment j'allais commencer à le style..

Mon exemple 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>
  • donner une classe personnalisée comme class_name et que de commencer
  • pour la sortie désirée, ne pas utiliser de panel-head utilisation panel-body
  • Cette question semble être sur le style plutôt que d'un réel problème ...qu'avez-vous essayé de vous et pourquoi n'a t il pas de travail?
  • Im pas sûr où commencer sur le style à tous, n'a jamais utilisé ces panneaux avant...
  • savez-vous il y a le css pour le style
InformationsquelleAutor Thomas Withers | 2015-09-18
  1. 4

    Le vérifier, cela va vous aider....

    CSS:

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

    HTML:

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

    InformationsquelleAutor Amit singh