CODEWITHSUNDEEP
csstwitter-bootstrap
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

centering an image on only small screens with twitter bootstrap

I have an image I'm trying to center in the middle of a div, but only on xs screens using twitter bootstrap.

On small and larger screens the layout looks like this:

enter image description here

When it goes to an xs screen it looks like this:

enter image description here

When the text falls off the page on the xs screen I'd like to have the image centered.

My html for this div is this:

HTML

        <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <div class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
                        <div class="img">
                        </div>
                    </div>
                    <div class="col-xl-8 col-md-7 col-sm-6 col-xs-12">
                        <div class="info">  
                        </div>
                        <div class="icons">
                            <ul class="list-inline icon-list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

The img div is the one containing the image that I want to center on small screens.

I attempted the following CSS but it doesn't work:

CSS

.col-xs-12  > .img img {
display: block;
margin: 0, auto !important;
}

It's not clear to me why this isn't working.

Upvotes: 1

Views: 2172

Answers (1)

lucgenti
lucgenti

Reputation: 388

Simply text-align on the column of the div with class img. Call it with class centered for practical reasons

.centered {
    text-align:center;
}

https://jsfiddle.net/udwtavzh/2/

Upvotes: 1

Related Questions