Estilizar uma caixinha de anúncio

[Emanuellefx 0]

Oi pessoal, olha eu aqui de novo... Acho que o título não ta tão de acordo, mas enfim, a ajuda que preciso creio que não é tão complexa kk, mas pra mim ta se tornando por falta de tempo.. Eu tenho uma página simples de anúncios, o que tenho é isso: http://static.tumblr.com/lb7gsbo/afRnq3fh2/anuncios.jpg

mas preciso que as caixinhas fiquem como esse esqueleto e a estilização não tao diferente do que eu fiz, mas mais bonitas, entendem? Assim : http://static.tumblr.com/lb7gsbo/qBbnq3fsi/anuncioesqueleto.png

[danmartinsiss 5]

Bom dia segue a ajuda do dia hehehehe

 

no CSS voce poe esse

}
.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	-webkit-transition: border .2s ease-in-out;
	-o-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out
}
.thumbnail a>img, .thumbnail>img {
	margin-right: auto;
	margin-left: auto
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
	border-color: #337ab7
}
.thumbnail .caption {
	padding: 9px;
	color: #333
}

.row {
	margin-right: -15px;
	;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px
}

ja para o HTML voce utiliza esse modelinho aqui.

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="aqui a imagem a ser colocada" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>   informe o texto aqui </p>
      </div>
    </div>
  </div>
</div>

 

valeu

[Emanuellefx 0]

O tamanho da caixinha bugou, achei a princípio que fosse pq dei <center> no título, mais aí eu tirei ele pra testar e ela seguiu gigante pros lados (assim: http://static.tumblr.com/lb7gsbo/nqtnq5bih/teste.jpg) e eu preciso de um tamanho fixo e menor que este ja que vai ficar junto de várias outras como o rascunho que mostrei o print, saberia me dizer como fazer?

[danmartinsiss 5]

teste dessa maneira

 

alterei apenas o col-sm coloquei ele como 3 para apenas usar uma coluna ai se voce for colocar mais voce informa vai colocando dentro da div ROW e Col-sm-3 as divs que estao separadas nao devem se repeetir...

 

 

repita apenas as que estao no meio separadas para voce informar os produtos.

<div class="row">
  <div class="col-sm-3>


    <div class="thumbnail">
     <img src="http://imageplaceholder.com/gen.php?size=200x200&bg=ccc&fg=fff&format=png">
      <div class="caption">
        <h3>Nome do Produto</h3>
        <p>   informe o texto aqui </p>
      </div>
    </div>


  </div>
</div>