CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapthumbnails
Alejandro Martinez
Alejandro Martinez

Reputation: 93

How remove margin of Thumbnails Bootstrap

I'm trying to remove the margin of the Thumbnails, but I cant. I dont know what i'm doing wrong.

My Code is:

     <div class="col-lg-4">
        <div id="thumbs"> 
            <div class="thumbnail">
            <span class="badge badge-padding-bottom">$50.000</span>
            <span class="badge badge-padding-bottom pull-right">$50.000</span>
               <a class="efecto" rel="gallery1" href="img/slide-1.jpg">
                    <img src="img/slide-1.jpg" class="img-responsive">
                </a>
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Texto</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
        </div>
    </div>

        <div class="col-lg-4 ">
        <div id="thumbs"> 
            <div class="thumbnail">
            <span class="badge badge-padding-bottom">$50.000</span>
               <a class="efecto" rel="gallery1" href="img/slide-2.jpg">
                    <img src="img/slide-2.jpg" class="img-responsive">
                </a>
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Texto</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
        </div>
        </div>

        <div class="col-lg-4">
        <div id="thumbs"> 
            <div class="thumbnail">
            <span class="badge badge-padding-bottom">$50.000</span>
               <a class="efecto" rel="gallery1" href="img/slide-3.jpg">
                    <img src="img/slide-3.jpg" class="img-responsive">
                </a>
              <div class="caption">
                <h3>Thumbnail label <span class="label label-danger">Sin Stock</span> </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum incidunt dolores, sit ab accusantium tempore nihil repudiandae illo fugiat distinctio possimus earum rem in libero fugit, ut mollitia iusto.</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">Button</a>
                    <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon glyphicon-plus"></span>Button</a>
                </p>
              </div>
            </div>
        </div>
        </div>

        <div id="thumbs"> 
        <div class="col-lg-4">
            <div class="thumbnail">
            <span class="badge badge-padding-bottom">$50.000</span>
               <a class="efecto" rel="gallery1" href="img/slide-2.jpg">
                    <img src="img/slide-2.jpg" class="img-responsive">
                </a>
              <div class="caption">
                <h3>Thumbnail label  <span class="label label-success"></span> </h3>
                <p>Texto</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
        </div>
        </div>

        <div class="col-lg-4">
        <div id="thumbs"> 
                <div class="thumbnail">
                <span class="badge badge-padding-bottom">$50.000</span>
                     <a class="efecto" rel="gallery1" href="img/slide-1.jpg">
                        <img src="img/slide-1.jpg" class="img-responsive">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label   <span class="label label-info"></span> </h3>
                        <p>Texto</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

That looks: https://i.sstatic.net/gUkUt.png)

I want something like this: https://i.sstatic.net/KIreB.png

Somebody can I Help Me?

Upvotes: 0

Views: 646

Answers (1)

austinthedeveloper
austinthedeveloper

Reputation: 2601

You will need to use a JS plugin like Masonry or Isotope to get that type of look.

Upvotes: 1

Related Questions