How do I center an image inside a Bootstrap panel nested inside another panel?

Question

I have a page with a main bootstrap panel and inside this panel I have another panel. The objective is to have multiple nested panels inside the main one creating something that looks similar to an image gallery.

I was able to create the content and at this point it is responsive, adjusting the number of nested panels per row and its size when necessary.

However the inner panels have an image that should be centered. I tried placing the image inside a div with class container. However, when I do that, at certain screen sizes, the images end up outside the inner panels.

Here's my HTML (for the sake of simplicity with only 2 inner panels):

<div id="mainContainer" class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Panel Title</div>
        <div class="panel-body">
            <div class="row">
                <!--BEGIN OF ITEM 1 -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Item 01</div>
                        <div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
                    </div>
                </div>
                <!--END OF ITEM 1 -->
                <!--BEGIN OF ITEM 2 -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Item 02</div>
                        <div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
                    </div>
                </div>
                <!--END OF ITEM 2 -->
            </div>
        </div>
    </div>
</div>

jsfiddle available here: http://jsfiddle.net/9LFKV/

If you resize your browser, you'll see that at some point the inner panel grows in width but the image is left aligned.

In that case, how do I put the image centered without breaking everything else?

score 36 · Accepted Answer · answered Mar 08 '14 at 23:05

36

Twitter bootstrap has a helper class of center-block, you could use that to align the element horizontally as follows:

<img src="http://placehold.it/150x150" class="img-responsive center-block">

WORKING DEMO.

You can also use text-center class for the parent element to align its inline elements.

answered Mar 08 '14 at 23:05

Hashem Qolami

97,268
26
150
164

out of curiosity, would you know if this class was available back in 2.X? Guess I should spend more time reading the CSS docs. Usually spend my time on Javascript and Components docs. Anyway, Thanks a lot! – Rodrigo Lira Mar 08 '14 at 23:15
@user1677919 I don't think so, However you can refer [my answer here](http://stackoverflow.com/questions/21818246/how-to-center-an-image-within-a-col-element-in-bootstrap-3/21818300#21818300) to implement that; Simply by: `.center-block { display: block; margin-left: auto; margin-right: auto; }`. – Hashem Qolami Mar 08 '14 at 23:20
1

I'm using version 3. But I learned Bootstrap with version 2 and don't remember if that was available at that time. It was just out of curiosity really. Thanks! – Rodrigo Lira Mar 08 '14 at 23:57

score 4 · Answer 2 · answered Mar 17 '14 at 08:20

4

Add style margin:auto to your image,that will help you to horizontally center your image

answered Mar 17 '14 at 08:20

Maria Rose

85
1
2
8

How do I center an image inside a Bootstrap panel nested inside another panel?

2 Answers2