CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Giuseppe De Paola
Giuseppe De Paola

Reputation: 318

Create a four columns div inside bootstrap thumbnail

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: Result

but i want to do something like this: Result i want

[EDIT] If i add padding:0 to the three div, i get this: enter image description here

Upvotes: 1

Views: 1159

Answers (4)

wegelagerer
wegelagerer

Reputation: 3720

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.

Upvotes: 2

Hisham Elsayad
Hisham Elsayad

Reputation: 474

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>

Upvotes: 0

ganesh satpute
ganesh satpute

Reputation: 391

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;
    }

Upvotes: 2

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

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>

Upvotes: 1

Related Questions