58

My goal is to display 4 images per row. Code below:

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
    </div>                                                                                    
</div>

And I expect too see images resized based on column style from Bootstrap, but what I'm getting are overlapping full images .

Any clue what is going on?

7 Answers 7

131

Try adding this to your stylesheet:

img {
    width: 100%;
}

Update: As an alternative (as pointed out in this answer's comments by @JasonAller), you could add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See the Bootstrap docs for more info.

update for bootstrap v4

The classname for bootstrap v4 is img-fluid
Bootstrap v4 docs

4
  • 6
    What is the benefit of adding that over using class="img-responsive" on the <img> elements? Jul 12, 2014 at 20:10
  • 1
    No added benefit aside from less markup. Adding an img-responsive class would work also you'd just have to remember to do it for every image. Jul 12, 2014 at 20:35
  • 2
    maybe you should try max-width instead so images don't stretch.
    – Codex73
    Feb 2, 2016 at 19:55
  • class="img-responsive" did it for me. I also had to add style="padding:0" to the containing div, as Katia Punter suggests below, to get a good result that wasn't too small.
    – davaus
    Oct 18, 2017 at 21:56
27

With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.

0
6

Sometimes on dynamic content when you have no control over what users put in, class="img-responsive" would not work. And 'width: 100%' for each image is tricky as well. So I am using:

img {max-width: 100%;}
2

Beware that bootstrap columns have padding as well; that may be unexpected.

The following:

div class="col-sm-6" style="padding:0"

worked for me.

2

General solution for Bootstrap 5. And I'm adding a particular solution to OP's problem at the end of my answer.

Resizing seems not to be an easy task on some situations. I haven't found any built-in implementation in BS5 for specific image resizing using Bootstrap classes.

The best solution I've found is handling images as they were any other HTML element (a span or a div element).

GENERAL SOLUTION

Use this snippet

<img
    src="~/Content/images/YourImage.jpg"
    class="img-fluid mx-auto mx-lg-0 h-100 col-8 col-sm-6 col-md-4 col-lg-1 my-auto"
>

NOTE: This is just a general example. Adapt it to your needs.

Explanation (more or less this is what happens)

  1. BASIC SET UP (for Bootstrap responsive image):
    • img-fluid: Image is made responsive. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
    • mx-auto: centers the image in the horizontal axis, for phone views. Left and right margins are set to auto
    • mx-lg-0: When the lg break-point is reached, the margin to both sides are set to 0.
  2. USING COLUMNS (resize to your needs):
    • h-100: Image height is set to 100% relative to the parent. This should preserve the correct aspect ratio.
    • col-8: At the smallest screen size, image will occupy 8 columns.
    • col-sm-6: After the small screen break point (see links at the section below), image will occupy 6 columns.
    • col-md-4: At mid sized screens, 4 columns.
    • col-lg-1: At large sized screens, 1 column.
    • my-auto: This is for vertical centering (optional).

Remember, you'll set the columns occupied at your own will and pleasure.

Result

Alligator

SOLUTION FOR THIS QUESTION

The main problem with your code is that you're missing classes. Remember: Bootstrap is mostly about using classes correctly. You should think twice if you're using the built-in classes correctly before putting in your own CSS code.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>

For responsiveness on different screen sizes, take a look to the general solution above.

Links

0

If you want, you can use the width tag in the html element, for example:

    <img width="60%" src="...">

I find it more useful, since you can play with the percentage until you have the desired size.

1
  • 5
    This isn't a very responsive solution. Considering Bootstrap is a responsive framework.
    – TidyDev
    Feb 3, 2018 at 20:33
0

The solution to this is to use the <picture> and the <source> tags. Just make sure you have different sizes of your image prepared for various screens.

https://www.w3schools.com/tags/att_source_media.asp

1
  • Not entirely relevant to the question since it specified use of bootstrap, but could be used in some scenarios. Sep 3, 2020 at 11:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.