Bootstrap 75% / 25% with 4 image thumbs (how to resolve) - css

Question

Folks,
I'm trying to build with bootstrap. Following this basic markup:
<div class="container">
<header class="row">
</header>
<div class="row">
<div role="main" class="col-md-8">
</div>
<aside role="complementary" class="col-md-4">
</aside>
</div>
<footer class="row">
</footer>
</div>
I created the following page:
http://clubedebeneficiosunilife.com.br/thumbs-promocoes-logadoTest2.php
The problem that the thumbs were 'stretched' occupying all available space. I wish it were that displayed:
http://clubedebeneficiosunilife.com.br/main-col-side-bar.png
That is, the 'main' column in a notebook or desktop occupying 75% of the screen and 'terras' column containing the sidebar should occupy 25% of the width.
Only within the column 'main' I need to be displayed 4 thumbs (as print). I've tried everything
I'm already on my knees asking for help. Does anyone know how to solve?
Thank you in advance.

Answer 1

before thumbnail class just add class col-md-3 class then it will give you the exact result
.thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
min-height: 165px;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
<div class=" col-md-3">
<a class="thumbnail" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">-->
</a>
</div>

Answer 2

add this style to your website
.thumbnail {
display: inline-block;
margin-right: 20px;
width: 22%;
}

Answer 3

Try This
CSS
.thumbnail{
border:0;
}
.thumbnail img{
border:1px solid gray;
}
HTML
<div class"container-fluid">
<div class="row">
<aside role="complementary" class="col-md-4">
</aside>
</div>
<!--<div role="main" class="col-md-8 thumb">-->
<div role="main" class="col-md-8 col-lg-4 thumb">
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
</div>
<!--<div class="col-lg-12 col-md-12 col-xs-12 thumb">-->
<aside role="complementary" class="col-md-4">
<div class="arrowlistmenu"> <h3 class="headerbar">Categorias</h3>
<ul> <li class="arrowlistmenu">Academias</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=2">Artigos
Esportivos</a></li> <li>Automotivo</li>
<li>Alimentação</li>
<li>Compras</li>
<li>Beleza</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=7">Educação
e Cultura</a></li> <li>Informática</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=9">Lazer
e Entretenimento</a></li> <li>Medicina e Saúde</li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=11">Móveis
e Decoração</a></li> <li>Serviços</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=13">Viagem
e Turismo</a></li> </ul>
</div> </aside>
<!--</div>-->
</div>
</div>