CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
user1787531
user1787531

Reputation: 819

How can I center the content of my columns on mobile devices?

Here's my code:

 <div class="col-xs-12 col-sm-4 col-md-3  example nopadding"><img src="holder.js/292x180" class="img-responsive"></div>

On small, medium, and large devices, I'm fine with the image positioning. But on mobile devices, I would like my image to be centered inside the row.

I've attempted to use "center-block" but that simply centers everything. I tried using offsets specifically for "xs" but it didn't produce a consistent look across all devices with 768 pixels of screen width and lower. What else would you guys suggest I do?

Edit: I realize this piece of CSS might be important. It's the only CSS I've added on top of the base Bootstrap CSS.

.nopadding { padding: 0 !important; margin: 0 !important; }

Upvotes: 0

Views: 77

Answers (2)

Mark
Mark

Reputation: 6865

you could try to use a media query to target the col-xs-12 and center the image only then:

@media screen and (max-width: 400px){
 .col-xs-12.example {
  text-align: center;
 }
}

remove the nopadding class.

Upvotes: 2

Sven
Sven

Reputation: 252

because you did not provide a demo I had to guess what you actually want.

Here is a Demo how I think what u want and what to do. Fiddle Demo

To explain, I changed the Image from inline to be a block element, than you can use margin and auto to keep it in the center.

.img-responsive {
    display: block;
    margin: 0 auto;
}

Upvotes: 1

Related Questions