Padding Bootstrap Thumbnails

user_8736020 0
Viewed 2165

I am using thumbnails in bootstrap. I have been able to correct the padding to my liking on the sides, but not below it. This is a big problem on mobile as it's way too wide for my liking.

Code:

<div class="col-5-gutter">
<div class="col-md-4">
<div class="thumbnail"><img src="images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Text</h3>
<p>Text.</p>      
</div>
</div>
</div>
<div class="col-5-gutter">
<div class="col-md-4">
<div class="thumbnail"><img src="images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Text Here</h3>
<p>Text Here</p>
</div>
</div>
</div>
</div>

CSS:

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    padding-bottom: 5px;
}
twitter-bootstrap thumbnails css html
3 Answers

The answer was marginsnotpadding. However the problem was in the thumbnail class:

.thumbnail {
margin-bottom: 5px;

}

user_87360200

for effect only at big screen use @media in CSS :

@media ( min-width : 992px) {
     .col-5-gutter > [class*='col-'] {
        padding-right:5px;
        padding-left:5px;
        padding-bottom: 5px;
    }
}

992px is for example, can use your prefer size

user_61654150

I think that you should be thinking of margins instead of padding when you want space outside an element. So I would suggest adding the CSS property margin-bottom:5px, add the property to the CSS classs like.

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    margin-bottom: 5px;
}

If this does not work, then some other CSS class must be overriding the margin-bottom. Then please modify the class to.

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    margin-bottom: 5px !important;
}

I was not able to replicate your issue in my bootstrap snippet, it may be due to some other CSS class.

Below is a snippet demonstrating margin-bottom.

.col-5-gutter div[class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text</h3>
        <p>Text.</p>
      </div>
    </div>
  </div>
  <div class="col-5-gutter">
    <div class="col-md-4">
      <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
        <div class="caption">
          <h3>Text Here</h3>
          <p>Text Here</p>
        </div>
      </div>
    </div>
  </div>

Also I find that the HTML is weird Should the HTML layout be like this (if wrong please ignore this section).

.col-5-gutter div[class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text</h3>
        <p>Text.</p>
      </div>
    </div>
  </div>
</div>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text Here</h3>
        <p>Text Here</p>
      </div>
    </div>
  </div>

user_59245620
Related