Create a four columns div inside bootstrap thumbnail - html

Question

i have a problem creating three four columns div inside the bootstrap thumbnail. The problem is that if i use the col-xs-4 class, the text inside go out of the caption of bootstrap. And if i use three div inside another one, it works, but i can't align the text inside each div at the center. Any ideas? Currently i use this script:
<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
<a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
<img src="<?php echo $url1;?>" alt="Immagine profilo" />
<span class="flag-diamond"></span>
<div class="caption">
<div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
<div class="esc_city"><?php echo $dati['citta'];?></div>
<div style="width:100%">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
</div>
</a>
</div>
and i get this:
but i want to do something like this:
[EDIT]
If i add padding:0 to the three div, i get this:

Answer 1

With Bootstrap you can nest divs which basically means that you can just add a surrounding row to your 3 divs.
<div class="row">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
The reason this should work is because row class has negative left and right margins which will automatically adjust itself to the container which, in your case, is the outer div.

Answer 2

write class
.no-padding{
padding:0px;
}
Then apply where you don't want padding as follows
<div class="col-xs-4 no-padding">TRY</div>
<div class="col-xs-4 no-padding">TRY</div>
<div class="col-xs-4 no-padding">TRY</div>
I hope this will solve your problem if not try adding !important to padding this will override other padding if it's overriding
.no-padding{
padding:0px !important;
}

Answer 3

please try this css code instead of col-xs-4:
<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>
<div class="col-sm-4">TRY</div>

Answer 4

best way you can set the padding = 0 or you can set a background-color for the container div
like
<div class="col-md-3 col-lg-3 col-xs-6 col-sm-4">
<a href="profilo?id=<?php echo $dati['id'];?>" class="thumbnail">
<img src="<?php echo $url1;?>" alt="Immagine profilo" />
<span class="flag-diamond"></span>
<div class="caption">
<div class="esc_username"><span class="username"><?php echo $username;?></span><span class="hidden-xs age"><?php echo $anni;?> anni</span></div>
<div class="esc_city"><?php echo $dati['citta'];?></div>
<div style="width:100%;background-color:#EEE;">
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
<div class="col-xs-4">TRY</div>
</div>
</div>
</a>
</div>