On this page I have 12 images, so far okay. But I like to make them more responsive.

https://www.outdoorequipped.com/

The code I use is follow and I know I am missing something, but I am not sure what.

Also, how I can do, that this div, where all those 12 images are, has a "auto hight?

<div class="row" style="height: 60px;">
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/asics.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/puma.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/speedo.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/caterpillar.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/caterpillar-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/sanita.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/sanita-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/wrangler.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/wrangler-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
</div>
Member Avatar for diafol

The 'responsiveness' of the images in this setup are down to the columns you stipulate wrt grid (12 cols). Not sure exactly what you're after. BS has other breakpoints such as 'md' and 'lg'. But nothing stopping you creating additional custom breakpoints.

Also, how I can do, that this div, where all those 12 images are, has a "auto hight?

Sorry, I don't understand. Do you want to force images to a particular height? Scaled x,y? Please expand.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.