How to center-align Bootstrap Images when decreasing browser window (responsive)

Question

Here is my code sample. in full-width of the browser everything looks fine. But when I resize it, the images (cards) are more towards the left side (not centered). How can I fix this?

HTML code:

<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
        </div>
    </div>

Since I'm using Bootstrap v4, it should automatically adjust according to the page. But here is what I experience...

See the image

Seems to be working as intended. Each column gets set to 100% width when you pass the `md` breakpoint. — Baruch, Oct 05 '17 at 10:58

score 1 · Answer 1 · answered Oct 05 '17 at 10:59

1

You can try using a spacer class on the image when on smaller screens mx-sm-auto, for more info on these see here: https://v4-alpha.getbootstrap.com/utilities/spacing/

answered Oct 05 '17 at 10:59

Mike Sheward

315
1
7

Not working......... – the_dempa Oct 05 '17 at 11:51

Znaneswar · Answer 2 · 2017-10-05T11:06:25.497

Add margin:auto and display: block to image to center it

Fiddle

.img-thumbnail{margin:auto;display:block}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
        </div>
    </div>

What is `.img-thumbnail` ??? I haven't use anything like that... — the_dempa, Oct 05 '17 at 11:15
But i can see in your html code `class="img-thumbnail" which is`added to `img` — Znaneswar, Oct 05 '17 at 11:20
add `.img-thumbnail{margin:auto;display:block}` this class to your css — Znaneswar, Oct 05 '17 at 11:23
check my fiddle https://jsfiddle.net/rfj260ry/ are you resizing? i think your css is not properly linking to html — Znaneswar, Oct 05 '17 at 11:36
No it's properly linked Sir. and when I add a different style, it works. but nor yours. I even tries using `!important` — the_dempa, Oct 05 '17 at 11:39
I have done the what you have told... not working... In my case the css is not working on `img-thumbnail` and I don't know why... — the_dempa, Oct 05 '17 at 11:46
can you add your code in the new fiddle? https://jsfiddle.net — Znaneswar, Oct 05 '17 at 11:48
Yes Sir. Now it's working. But One problem. in here, every image resides vertically by keeping only one image horizontally. `Can I first keep 3 images horizontally as a row when i resize and then 2 images horizontally, then finally at further resizing only one image horizontally as you have done now?` — the_dempa, Oct 05 '17 at 14:35

Satheesh Kumar · Accepted Answer · 2017-10-05T11:27:42.613

Apply display: inline-block; to the img tag then apply text-align: center; to the parent;

In your code, you have applied display: block; to the image tag. Where now image act as a blocked element. That's why your image is not aligned in the center.

I have applied text-align: center; for imghvr-fold-up, because I can handle the caption and images in a single point.

Output:

//CSS
.img-thumbnail {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row ">
        <div class="col-md-2 text-center">
            <figure class="imghvr-fold-up">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption class="">
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
        <div class="col-md-2">
            <figure class="imghvr-fold-up text-center">
                <figcaption>
                    Hello
                </figcaption>
                <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
            </figure>
        </div>
    </div>
</div>

Demo at codepen.

Checkout my demo in codepen. Did you applied the "text-center" class in the "imghvr-fold-up". — Satheesh Kumar, Oct 05 '17 at 12:01

How to center-align Bootstrap Images when decreasing browser window (responsive)

3 Answers3