user2725921 user2725921 - 1 month ago 8
CSS Question

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


I'm trying to build with bootstrap. Following this basic markup:

<div class="container">
<header class="row">

<div class="row">
<div role="main" class="col-md-8">

<aside role="complementary" class="col-md-4">

<footer class="row">


I created the following page:

The problem that the thumbs were 'stretched' occupying all available space. I wish it were that displayed:

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.


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="">
<img class="img-responsive" src="" alt="Teste" title="Teste">
 <!--<img src="" alt="Teste" title="Teste">-->