Bootstrap, how to align all image on the center?

Question

Currently my grid image were aligned like this

But my goal is to make the grid image like this, notice the "img 1" were aligned on the center. How to achieve this?

HTML

<div class="container">
    <div class="row imagetiles">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
    </div>
</div>

CSS

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
}

jsfiddle can be view here

Raptor · Accepted Answer · 2020-06-11T06:36:09.773

Here is the Bootstrap 4 way to do so.

You can just add d-flex align-items-center class to the row:

<div class="container">
    <div class="row imagetiles d-flex align-items-center">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
    </div>
</div>

Also, you used an incorrect version of Bootstrap 4 in your initial JSFiddle. Updated to the latest version at this moment. Also, the jQuery version used is also incorrect (you should notice an error in Developer Console).

To set a particular DIV to have zero padding, you can use Bootstrap layout help class p-0; you don't need to set it specifically in CSS.

Last, img-responsive is for Bootstrap 3, img-fluid is for Bootstrap 4. Don't mix them up.

JSFiddle: https://jsfiddle.net/shivanraptor/bq8covg5/7/

score 2 · Answer 2 · answered Jun 11 '20 at 06:30

2

Change your CSS to:

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
  align-self: center;
}
div.imagetiles{
  display: flex;
}

here's the jsfiddle

answered Jun 11 '20 at 06:30

Shiz

695
10
27

score 1 · Answer 3 · answered Jun 11 '20 at 06:23

1

Simply add this to your CSS:

.imagetiles {
 align-items: center;
 display: flex;
}

jsfiddle here: https://jsfiddle.net/7snfxL4d/

answered Jun 11 '20 at 06:23

John

5,132
1
6
17

Working, but not in Bootstrap way. – Raptor Jun 11 '20 at 06:29

score 1 · Answer 4 · answered Jun 11 '20 at 06:25

1

You can use different approaches but the flex one is really easy like this :

.imagetiles{
  display: inline-flex;
  align-items: baseline;
}

answered Jun 11 '20 at 06:25

Ali Kianoor

1,167
9
18

score 0 · Answer 5 · answered Jun 11 '20 at 06:16

0

Try to add class my-auto to your img tag
If 1st dont work try to make the whole row a flex-wrap with classes d-flex align-content-center flex-wrap

You can find more here.

answered Jun 11 '20 at 06:16

ViLuWi

307
3
19

hmmm seems like both doesnt work on my jsfiddle – LearnProgramming Jun 11 '20 at 06:19
Are you sure that you implement bootstrap right? Because if I add simple class in jsfiddle bootstrap isnt working like it should – ViLuWi Jun 11 '20 at 06:29
Hi both, the initial JSFiddle has JS error due to incorrect version of jQuery. Please check Developer Console – Raptor Jun 11 '20 at 06:37

Bootstrap, how to align all image on the center?

5 Answers5