I will like to have thumbnail with images of different sizes and different amount of text. But I want them to all have the same size. Like this example from the Bootstrap site.
Below is the code I have at the moment, with a demo on jsFiddle.
I have different images size, so this gets broken. Is this possible with Bootstrap?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>
Fading a RGB LED on BeagleBone Black
</h3><img src="https://learn.adafruit.com/system/guides/images/000/000/322/medium310/overview_web.jpg?" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to control the color of an RGB LED using a BeagleBone Black and Python.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>
Measuring Light with a BeagleBone Black
</h3><img src="https://learn.adafruit.com/system/guides/images/000/000/316/medium310/overview_web.jpg?" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to connect a photoresistor to a BeagleBone Black. The tutorial can also be used for other resistive sensors such as FSRs or SoftPots.</p>
</div>
</div>
</div>
To make an image responsive in Bootstrap, add a class . img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Navigate to the Settings > Media tab. Look for the Image sizes > Thumbnail size section. Change the default width and height of your thumbnails in pixels.
You can achieve that by defining dimensions for your containers.
for example in your container element(.thumbnail), set a specific dimensions to follow like:
.thumbnail{
width: 300px;
// or you could use percentage values for responsive layout
// width : 100%;
height: 500px;
overflow: auto;
}
.thumbnail img{
// your styles for the image
width: 100%;
height: auto;
display: block;
}
and so on with the other elements.
SAMPLE
You can accomplish this with CSS on the img
tag.
img {
width: 200px;
height: 200px;
}
or inline on each img
tag like this
<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With