/ / Plantilla del panel Bootstrap [cerrado] - html, css, html5, twitter-bootstrap, css3

Plantilla del panel de bootstrap [cerrado] - html, css, html5, twitter-bootstrap, css3

H chicos, soy nuevo en bootstrap y tratando de crearuna plantilla de panel, sin embargo, soy tan malo en eso que realmente no estoy llegando a ningún lado, ¿podría alguien explicarme cómo obtener el resto? Estoy cerca, pero solo estoy tratando de encajonar el resto ahora mismo.

Esto es lo que estoy tratando de crear. He hecho algo de eso pero parece que no puedo entender bien el resto. Cualquier ayuda en este tema sería genial. Gracias

Código

<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<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">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="/images/http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>

Gracias chicos por la ayuda .

Respuestas

1 para la respuesta № 1

Desde su imagen, parece que desea crear una lista junto a su panel interno.

Fácil. Solo crea otro div con los valores de la columna de cuadrícula establecidos.

      <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="/images/http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
</div>
<!-- Setting the column values so the totals equal 12 -->
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
<h4>
List Title
</h4>
<ul class="list-group">
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
</ul>
</div>
</div>

jsfiddle