Bootstrap and Jinja - centering images-CodePudding

I'm using Bootstrap3 in my Django project and I would like to display images in row next to each other horizontally and I have:

<div class="row">
    {% for image in images %}
        {% if image.image %}
                <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                    <img class="img-responsive" src="{{ image.image.url }}" />
                </div>
        {% endif %}
    {% endfor %}
    </div>

and it works. But images are displayed from left to right (for example, if there is only 1 image, it's pinned to the left and it doesn't look great). How can I center all images to always be centered independent on number of images?

CodePudding user response：

To center a list if block in a main block independent of number of child block, you can use css flex justify-content: center like this :

<!-- Without bootstrap -->

<style>
    .images-box {
        display: flex;
        justify-content: center;
      }
</style>

<div class="row images-box">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

<!-- With bootstrap 4 -->

<div class="row d-flex justify-content-center">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

NB : With bootstrap version 4 you have to add to the parent div class. If you are forced to use V3 then try vanilla css as above.